数据表自定义组件字段使用组件渲染

在实际的项目开发过程中，我们发现有一些场景，使用系统提供的表单字段类型没法覆盖完整的应用场景。这时候，我们可以通过组件编辑器去开发组件，并使用自定义组件字段进行渲染。

本章节将介绍组件作为自定义组件字段，在表单中与表单的数据交互。并以集成ElementUI穿梭框组件为例子进行阐述。

效果图

穿梭框组件定义

组件设计器中创建组件，并将下方的定义粘贴到对应的版块，完成组件定义

组件库依赖

该组件需要依赖ElementUI组件库

模板

<div style="width:100%;height:100%;position:relative">
    <el-transfer :data="data" :value="value" v-on:change="change"></el-transfer>
    <div style="margin-top:20px">
        <el-button v-on:click="showLoading">
        设置表单loading
        </el-button>
    </div>
</div>

脚本

export default{
    // 组件参数定义
    props: {
        data: {
            type: Array,
            default:() => []
        },
        value: {
            type: Array,
            default:() => []
        }
    },
    methods:{
        showLoading() {
            // 表单显示loading
            this.$emit('show-loading');  
            setTimeout(() => {
                // 表单隐藏loading
                this.$emit('hide-loading')  
            }, 3000);
        },
        change(val) {
            // 设置表单字段的值
            this.$emit('set-field-value', { field: 'transferValue', value: JSON.stringify(val) }) 
        }
    }
}

表单配置步骤

组件完成定义后，配置一个数据表包含以下字段：

标识符	名称	类型	描述
transfer	自定义组件穿梭框	自定义组件
transferValue	穿梭框数据	富文本	用于存储自定义组件的数据，编辑器类型为文本编辑器

自定义组件配置：

通过创建或者编辑页面打开表单页面进行体验即可