Using Component Rendering for Data Table Custom Component Fields

In actual project development, we find that in some scenarios, the form field types provided by the system cannot cover all application scenarios. At this time, we can use the component editor to develop components and use custom component fields for rendering.

This chapter will introduce how components interact with form data as custom component fields, and will be explained using the integration of ElementUI transfer component as an example.

Effect Diagram

Transfer Component Definition

Create a component in the component designer and paste the following definitions into the corresponding sections to complete the component definition.

Component Library Dependency

This component depends on the ElementUI component library

Template

<div style="width:100%;height:100%;position:relative">
    <el-transfer :data="data" :value="value" v-on:change="change"></el-transfer> // [!code highlight]
    <div style="margin-top:20px">
        <el-button v-on:click="showLoading"> // [!code highlight]
        Set Form Loading
        </el-button>
    </div>
</div>

Script

export default{
    // Component parameter definition
    props: {
        data: {
            type: Array,
            default:() => []
        },
        value: {
            type: Array,
            default:() => []
        }
    },
    methods:{
        showLoading() {
            // Show form loading
            this.$emit('show-loading');  
            setTimeout(() => {
                // Hide form loading
                this.$emit('hide-loading')  
            }, 3000);
        },
        change(val) {
            // Set form field value
            this.$emit('set-field-value', { field: 'transferValue', value: JSON.stringify(val) }) 
        }
    }
}

Form Configuration Steps

After defining the component, configure a data table with the following fields:

Identifier	Name	Type	Description
transfer	Custom Component Transfer	Custom Component
transferValue	Transfer Data	Rich Text	Used to store custom component data, editor type is Text Editor

Custom component configuration:

You can experience it by opening the form page through the create or edit page.