ZnDynamicRender 动态渲染组件

可以根据类型动态渲染组件类型，同时可以根据禁用的状态，动态渲染label或者select组件

TIP

目前默认支持以下几种：

• input:文本框
  • (diabled = true时使用div元素，否则使用el-input元素)
• number:数字框
  • (diabled = true时使用div元素，否则使用el-input-number元素)
• date:日期框
  • (diabled = true时使用zn-date-label元素，否则使用el-date-picker元素)
• html:富文本
  • (diabled = true时使用div元素，否则使用el-input元素)
• money:金额框
  • (diabled = true时使用zn-select-label元素，否则使用el-select元素)
• textarea:多行文本框
  • (diabled = true时使用div元素，否则使用el-input元素)
• dict:字典选择框
  • (diabled = true时使用zn-select-label元素，否则使用zn-dict-label元素)

基础使用

传递类型和value值即可使用

修改值会实现双绑定：

hello world

<template>
    <div>
        <zn-dynamic-render component-type="input" v-model="value" />
        修改值会实现双绑定：
        <zn-dynamic-render component-type="number" :disabled="true" v-model="value" />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value: 'hello world'
            }
        }
    }
</script>

Expand Copy Copy

扩展

默认支持的组件，不一定能满足所有需求，而且不是所有系统都有element-ui，所以可以根据需要扩展组件 因此提供了$rendererRegistry方法来扩展组件

this.$rendererRegistry.registerComponent(
    'input', // 组件类型
    component: (disabled:boolean) => String|Component, // 组件类名或者组件实例
    {}, // 组件props,可以自定义一些参数
    { value: 'value', event: 'input' } // 组件双向绑定的规则，需要重点关注
)