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	<dynamic-form :config="someConfig" v-model="someData" />

实现

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

?

1	<input v-model="something">

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

?

1 2 3

<input  :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

<template>  <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">  <slot/>  </el-form> </template> <script> export default {  props: {  formConfig: {  type: Object,  required: true  },  value: {  type: Object,  required: true  }  }, } </script>

第二步，设置默认值。

因为在每个 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-form-item>  <component :is="`el-${item.type}`" /> </el-form-item>

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

?

1 2 3 4

<el-form-item>  <el-input v-if="item.type === 'input'" />  <span v-else>未知控件类型</span> </el-form-item>

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

根据这个思路，我们来封装一个 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

<template>  <el-form-item :rules="item.Rules" :label="item.label" :prop="item.key">  <el-input  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"></el-input>  <el-select  v-else-if="item.type==='select'"  v-bind="$attrs" v-on="$listeners"  :multiple="item.multiple"  :disabled="item.disabled"  :multiple-limit="item.multipleLimit">   <el-option   v-for="o in item.options"   :key="o.value"   :label="o.label"   :value="o.value"   :disabled="o.disabled">   </el-option>  </el-select>  <!--突然有点想念JSX-->  ...  <span v-else>未知控件类型</span>  </el-form-item> </template> <script> export default {  props: {  item: {  type: Object,  required: true  }  } } </script>

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

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

?

1 2 3 4 5 6 7

<dynamic-form-item  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

<!--普通使用--> <input-number  v-model="someNumber"  :min="1"  :max="99"  :decimal1="2"  append="元"></input-number> <!--在dynamic-form-item中的应用--> <input-number  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"></input-number>

完整代码： 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

<template>  <el-form-item :rules="Rules" >   ...  </el-form-item> </template> <script> import request from '@/utils/request' export default {  props: {  item: {...}  },  computed: {  Rules() {   const rules = this.item.rules   if (rules === undefined) return undefined   const R = []   rules.forEach(rule => {   if (rule.sql) {    const validator = (rule2, value, callback) => {    // 根据项目自行修改    request('/api/validate', 'POST', {     key: rule2.field,     value,     sql: rule.sql.replace(/{key}/ig, rule2.field)    })     .then(res => {     callback(!res || undefined)     })     .catch(err => {     this.$message.error(err.message)     callback(false)     })    }    R.push({ validator, message: rule.message, trigger: 'blur' })   } else {    R.push(rule)   }   })   return R  }  }, } </script>

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

<template>  <el-form-item>   ...   <el-cascader    :options="item.options || require('element-china-area-data')[item.areaShortcut]"    ></el-cascader>  </el-form-item> </template>

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

<template>  <el-form-item>   ...   <el-select>    <el-option     v-for="o in item.options || ajaxOptions"     ></el-option>   </el-select>  </el-form-item> </template> <script> import request from '@/utils/request' export default {  props: {  item: {...}  },  computed: {...},  data() {  return {   ajaxOptions: []  }  },  created() {  const { optionsUrl, key, type } = this.item  if (optionsUrl) {   // 根据项目自行修改   request(`${optionsUrl}?key=${key}`, 'GET')   .then(res => {    this.ajaxOptions = res   })   .catch(err => { this.$message.error(err.message) })  }  } } </script>

总结

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

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