Vue可视化表单

可视化搭建简单来说主要使用 vue-draggable 拖拽组件生成表单页面，渲染成表单，组件的属性可以通过面板进行可视化配置，生成的表单页面可以支撑系统后续数据的增删改查。

核心技术点：拖拽元素生成 JSON 数据，可支持嵌套布局，JSON 数据渲染其实就是使用了 vue 的动态组件功能，每个拖拽过来的数据里有组件的名称字段，根据动态组件 component 生成对应的组件并挂载上所有的属性。

核心代码：

vue

<component :is="name" v-bind="prop"></component>

真的核心只有这一行，其他的工作都是修改 JSON 配置文件，从左侧的组件面板拖来一个组件，逻辑就是在配置文件中添加一项配置；在右侧属性修改面板中对属性进行修改，逻辑就是修改该组件配置项的某一项配置属性值；对 JSON 做出修改后，渲染面板会根据配置信息进行重新渲染。整体逻辑就是围绕 JSON 配置文件的增删改，渲染引擎根据 JSON 来渲染。

根据配置出来的页面，渲染出对应的表单新增页面、表单详情页面，对接好数据提交接口、流程流转接口，就完成了一个低代码平台的基础功能。

表单验证

从主流组件库来看，不考虑联动校验规则情况下，输入框比下拉框、单选、时间等组件的规则要复杂些。后者只需要做选择，一般增加是否必填规则即可，而前者除了必填，还有对字符做特别校验。通常用户可输入的组件比提供选项选择的组件在规则上要复杂些。

表单组件一般都至少有一条规则，如必填。

{
  "name": "firstName",
  "required": true,
  "errorMessage": "这是必填项"
}

对于只需要必填规则的组件来说，这样定义似乎并没有什么问题。然而很多时候一个组件往往有多个规则同时生效，如：希望该字段必填，能配置对应错误信息，同时还要求字符串长度有限制，对应过长或过短都能给相应的错误提示。

{
  "name": "firstName",
  "rules": [
    { "required": true, "message": "这是必填项" },
    { "min": 3, "message": "最小长度不能小于3" },
    { "max": 10, "message": "最大长度不能超过10" }
  ]
}

这样看起来清晰了很多，同时支持多条规则组合。这也是主流UI组件库都在用的表单校验 async-validator。rules字段应与 async-validator 在使用上保持一致，这样就可以利用第三方库做规则校验了。

表单联动

表单联动一般是指一个或多个表单字段的值或属性发生变化，使其他一个或多个表单字段的值或属性变化的交互。

如果把表单字段当做一个对象，表单值(value)当做一个特殊属性，还有一些普通属性，如显隐(hidden)、禁用(disabled)等，就会发现联动就是属性与属性之间逻辑绑定。如何做到监听value变化以及普通属性变化呢?

value之所以认为是特殊属性主要原因：该属性的变化会触发onchange事件。对应hidden、disabled等普通属性却没有，理论上也应该有onhidden、ondisabled相应事件。

如果把表单字段所有属性定义成响应式，任意属性变化时就能很方便通知到。也可以自己实现订阅发布方式，来修改表单属性。

一种是表单字段属性符合某种条件后，联动其他表单字段属性变化，这里称值联动
另一种是表单组件发生了某个事件(如onchange)，联动其他表单字段属性变化，这里称事件联动

Vue可视化表单 ​

表单验证 ​

表单联动 ​

Vue可视化表单

表单验证

表单联动