这篇文章主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下动态渲染就是有一个异步的数据，大概长这样：然后你需要把这个json渲染成这样：最后提交表单的数据长这样：然后我们目标就是封装这样一个组件：实现开始之前，你需要知道 v-model 的工作原理 ：这不过是以下示例的语法糖：了解这些后，我们再来一步一步实现这个组件。
  首先，把配置转发到 el-form ：第二步，设置默认值。因为在每个 form-item 都会需要一个 v-model ，所以在渲染之前，保证每个字段都有值。这里需要注意一点，组件内不要直接修改父组件传入的 prop ，所以我们在这里用 {。
  this。value} 快速拷贝一份，最后别忘了通知父组件。代码如下：第三步，渲染 form-item 。如何把下面的数据渲染为我们熟悉的 el-form-item ？第一种，利用 vue 内置的 component 组件，写起来可能像这样：第二种，使用 v-if 逐个判断：考虑到每种表单控件的处理逻辑千差万别，楼主采用了第二种方式。
  根据这个思路，我们来封装一个 dynamic-form-item ，接收一个 item ，渲染一个 el-form-item ：tips: 使用 v-bind="$attrs" v-on="$listeners" 可以方便地转发父组件的 v-model 指令，详见vue高阶组件。
  最后，我们就可以循环输出一个完整的表单了：这里不能用 v-model="value[item。key]" ，上文说了，组件内不能直接修改props，所以这里我们还是转发一下。完整代码地址： src/components/dynamic-form/form。
  vue扩展功能1。数字显示单位，限制小数位数element-ui 没有做这个功能，不过我觉得还是挺常见的，所以使用 el-input 手动封装了一个 input-number :完整代码： src/components/dynamic-form/input-number。
  vue2。异步验证得益于 async-validator ，我们可以很方便地自定义验证规则。在配置中在 dynamic-form-item 组件中, 遍历 item。rules , 将sql验证转化为自定义 validator 函数:3。省市区快捷配置感谢 element-china-area-data 的作者。
  在配置中:在 dynamic-form-item 组件中:4。从远程加载选项包括但不限于 radio 、 checkbox 、 cascader 、 select在配置中:在 dynamic-form-item 组件中:上面是我整理给大家的，希望今后会对大家有帮助。