1. 控件命名的问题

之前控件的字段渲染,是在代码 RxField.vue 中实现的。代码写法如下:

    <view v-if="attr.control=='rx-textbox'">
                    <rx-input v-model="data[attr.name]" :attr="attr" :permission="permission" :metadata="metadata" :subname="subname"
                     :readonly="readonly" :data="data"/>
                </view>
                <view v-else-if="attr.control=='rx-number'">
                    <rx-number v-model="data[attr.name]" :attr="attr" :permission="permission" :metadata="metadata" :subname="subname"
                     :readonly="readonly"  :data="data"/>
                </view>

这种写法比较麻烦,每增加一个控件,都需要修改这个代码,对扩展不是很友好。

因此我们在编写代码的时候采用如下的代码替代上面的写法。

 <component  v-bind:is="attr.control"
                    v-model="data[attr.name]" :attr="attr" :permission="permission" :metadata="metadata" :subname="subname"
                    :readonly="readonly" :data="data"
        ></component>

在这里我们使用动态组件来实现。关键代码 v-bind:is="attr.control"

这个 attr.control 表示为控件的类型。因此我们在编写控件的时候,控件的名称需要和 这个attr.control 保持一致。

比如:

地址控件:

//地址控件
export default {
        name: "rx-address",

//附件控件
export default {
        name: "rx-upload",

在编写代码一定要注意这个问题。

文档更新时间: 2021-09-10 22:55   作者:zyg