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

这篇文章主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

{  "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渲染成这样：

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

?

1 2 3 4

{  "name": "Genji",  "gender": "1" }

 

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

?

1	"someConfig" v-model="someData" />

实现

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

?

1	"something">

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

?

1 2 3

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

第二步，设置默认值。

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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 ？

?

1 2 3 4 5 6 7 8 9 10 11

{  "type": "input",  "label": "姓名",  "disable": false,  "readonly": false,  "value": "",  "placeholder": "请输入姓名",  "rules": [],  "key": "name",  "subtype": "text" }

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

?

1 2 3

"`el-${item.type}`" />

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

?

1 2 3 4

if="item.type === 'input'" />  else>未知控件类型

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

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

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

?

1 2 3 4 5 6 7

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，所以这里我们还是转发一下。

?

1 2 3 4 5 6 7

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 :

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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">

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

2.异步验证

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

在配置中

?

1 2 3 4 5 6 7 8 9 10 11

{  "type": "input",  ...  "rules":[   {    "sql": "SELECT {key} FROM balabala",    "message": "xx已被占用",    "trigger": "blur"   }  ] }

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

3.省市区快捷配置

感谢 element-china-area-data 的作者。

在配置中:

?

1 2 3 4 5

{  "type": "cascader",  ...  "areaShortcut": "provinceAndCityData" }

在 dynamic-form-item 组件中:

?

1 2 3 4 5 6 7 8

4.从远程加载选项

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

在配置中:

?

1 2 3 4 5

{  "type": "checkbox",  ...  "optionsUrl": "/api/some/options" }

在 dynamic-form-item 组件中:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

总结

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

转载地址：https://www.jb51.net/article/135992.htm