Vue+ElementUI实现表单动态渲染、可视化配置的方法

Vue+ElementUI实现表单动态渲染、可视化配置的方法

动态渲染就是有一个异步的数据，大概长这样：

{

"inline": true,

"labelPosition": "right",

"labelWidth": "",

"size": "small",

"statusIcon": true,

"formItemList": [

{

"type": "input",

"label": "姓名",

"disable": false,

"readonly": false,

"value": "",

"placeholder": "请输入姓名",

"rules": [],

"key": "name",

"subtype": "text"

},

{

"type": "radio",

"label": "性别",

"value": "",

"button": false,

"border": true,

"rules": [],

"key": "gender",

"options": [

{

"value": "1",

"label": "男",

"disabled": false

},

{

"value": "0",

"label": "女",

"disabled": false

}

]

}

]

}

然后你需要把这个json渲染成这样：

最后提交表单的数据长这样：

{

"name": "Genji",

"gender": "1"

}

然后我们目标就是封装这样一个组件：

实现

开始之前，你需要知道 v-model 的工作原理 ：

这不过是以下示例的语法糖：

:value="something"

@input="something = $event.target.value">

了解这些后，我们再来一步一步实现这个组件。

首先，把配置转发到 el-form ：

class="dynamic-form"

:inline="formConfig.inline"

:model="value"

:label-position="formConfig.labelPosition"

:label-width="formConfig.labelWidth"

:size='formConfig.size'

:status-icon="formConfig.statusIcon">

class="dynamic-form"

:inline="formConfig.inline"

:model="value"

:label-position="formConfig.labelPosition"

:label-width="formConfig.labelWidth"

:size='formConfig.size'

:status-icon="formConfig.statusIcon">

第二步，设置默认值。

因为在每个 form-item 都会需要一个 v-model ，所以在渲染之前，保证每个字段都有值。这里需要注意一点，组件内不要直接修改父组件传入的 prop ，所以我们在这里用 {...this.value} 快速拷贝一份，最后别忘了通知父组件。代码如下：

export default {

props: {

formConfig: {...},

value: {...},

},

methods: {

setDefaultValue() {

const formData = { ...this.value }

// 设置默认值

this.formConfig.formItemList.forEach(({ key, value }) => {

if (formData[key] === undefined || formData[key] === null) {

formData[key] = value

}

})

this.$emit('input', formData)

}

},

mounted() {

this.setDefaultValue()

},

}

第三步，渲染 form-item 。

如何把下面的数据渲染为我们熟悉的 el-form-item ？

{

"type": "input",

"label": "姓名",

"disable": false,

"readonly": false,

"value": "",

"placeholder": "请输入姓名",

"rules": [],

"key": "name",

"subtype": "text"

}

第一种，利用 vue 内置的 component 组件，写起来可能像这样：

第二种，使用 v-if 逐个判断：

未知控件类型

考虑到每种表单控件的处理逻辑千差万别，楼主采用了第二种方式。

根据这个思路，我们来封装一个 dynamic-form-item ，接收一个 item ，渲染一个 el-form-item ：

v-if="item.type==='input'"

v-bind="$attrs" v-on="$listeners"

:type="item.subtype"

:placeholder="item.placeholder"

:disabled="item.disable"

:readonly="item.readonly"

:autosize="item.autosize">

v-if="item.type==='input'"

v-bind="$attrs" v-on="$listeners"

:type="item.subtype"

:placeholder="item.placeholder"

:disabled="item.disable"

:readonly="item.readonly"

:autosize="item.autosize">

v-else-if="item.type==='select'"

v-bind="$attrs" v-on="$listeners"

:multiple="item.multiple"

:disabled="item.disabled"

:multiple-limit="item.multipleLimit">

v-for="o in item.options"

:key="o.value"

:label="o.label"

:value="o.value"

:disabled="o.disabled">

v-else-if="item.type==='select'"

v-bind="$attrs" v-on="$listeners"

:multiple="item.multiple"

:disabled="item.disabled"

:multiple-limit="item.multipleLimit">

v-for="o in item.options"

:key="o.value"

:label="o.label"

:value="o.value"

:disabled="o.disabled">

v-for="o in item.options"

:key="o.value"

:label="o.label"

:value="o.value"

:disabled="o.disabled">

...

未知控件类型

tips: 使用 v-bind="$attrs" v-on="$listeners" 可以方便地转发父组件的 v-model 指令，详见vue高阶组件。

最后，我们就可以循环输出一个完整的表单了：

v-for="item in formConfig.formItemList"

:key="item.key"

v-if="value[item.key]!==undefined"

:item="item"

:value="value[item.key]"

@input="handleInput($event, item.key)" />

这里不能用 v-model="value[item.key]" ，上文说了，组件内不能直接修改props，所以这里我们还是转发一下。

methods: {

handleInput(val, key) {

// 这里element-ui没有上报event，直接就是value了

this.$emit('input', { ...this.value, [key]: val })

},

setDefaultValue() {...}

},

完整代码地址：  src/components/dynamic-form/form.vue

扩展功能

1.数字显示单位，限制小数位数

element-ui 没有做这个功能，不过我觉得还是挺常见的，所以使用 el-input 手动封装了一个 input-number :

v-model="someNumber"

:min="1"

:max="99"

:decimal1="2"

append="元">

v-model="someNumber"

:min="1"

:max="99"

:decimal1="2"

append="元">

v-else-if="item.type==='number'"

v-bind="$attrs" v-on="$listeners"

:min="item.min"

:max="item.max"

:decimal1="item.decimal1"

:append="item.append"

:prepend="item.prepend"

:disabled="item.disabled">

v-else-if="item.type==='number'"

v-bind="$attrs" v-on="$listeners"

:min="item.min"

:max="item.max"

:decimal1="item.decimal1"

:append="item.append"

:prepend="item.prepend"

:disabled="item.disabled">

完整代码： src/components/dynamic-form/input-number.vue

2.异步验证

得益于 async-validator ，我们可以很方便地自定义验证规则。

在配置中

{

"type": "input",

...

"rules":[

{

"sql": "SELECT {key} FROM balabala",

"messageqopsS": "xx已被占用",

"trigger": "blur"

}

]

}

在 dynamic-form-item 组件中, 遍历 item.rules , 将sql验证转化为自定义 validator 函数:

...

3.省市区快捷配置

在配置中:

{

"type": "cascader",

...

"areaShortcut": "provinceAndCityData"

}

在 dynamic-form-item 组件中:

...

:options="item.options || require('element-china-area-data')[item.areaShortcut]"

>

:options="item.options || require('element-china-area-data')[item.areaShortcut]"

>

4.从远程加载选项

包括但不限于 radio 、 checkbox 、 cascader 、 select

在配置中:

{

"type": "checkbox",

...

"optionsUrl": "/api/some/options"

}

在 dynamic-form-item 组件中:

...

v-for="o in item.options || ajaxOptions"

>

v-for="o in item.options || ajaxOptions"

>

总结

以上所述是给大家介绍的Vue+ElementUI实现表单动态渲染、可视化配置的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。