江苏龙网

  1. 主页 > 生活百科 > >

基于 el-form 封装一个依赖 json 动态渲染的表单控件( 三 )

el-form

需要扩展子控件的时候，我们只需要向字典（dict）里面添加需要的组件即可，然后设置一个新的编号 。
// 添加临时动态组件formProps.customerControl = {300: 'el-transfer'}// 设置表单字段childMeta.select.controlType = 300

为啥用编号？虽然编号不易读，但是编号稳定，而且灵活 。如果我们要基于ant design Vue 封装控件的话，我可以直接用编号，但是如果用名称的话，那么要不要区分 el- 和 a- 呢？
实现数据联动联动分为数据联动，和组件联动，数据联动可以依赖UI库的组件来实现，或者依赖Vue的数据的响应性来实现 。
比如常见的省市区县联动，我们可以用 el-cascader 。
如果需要使用多个组件的话，我们可以监听组件的值的变化，然后获取数据绑定下一个组件的options 。
// 数据联动watch (() => model.provinces, (v1, v2) => {console.log('监听值的变化', v1)const arr = [{"value": 1 + v1, "label": "多选 选项一" + v1},{"value": 2 + v1, "label": "多选 选项二" + v1}]childMeta.city.optionList.length = 0childMeta.city.optionList.push(...arr)})
Vue 就是数据驱动的，所以联动的话也是直接监听value的改变即可，不用像以前那样要设置change事件了 。
实现组件联动组件联动，就是一个组件的值发生变化，影响其他组件的显示状态 。
基于 el-form 封装一个依赖 json 动态渲染的表单控件

文章插图
 

基于 el-form 封装一个依赖 json 动态渲染的表单控件

文章插图
 
比如在注册的时候，需要选择企业用户还是个人用户 。
如果是企业用户，需要添加企业名称（以及相关信息）；
如果是个人注册那么只需要填写个人姓名即可 。
这样表单里面显示的组件就要随之变化 。
对于这类的需求，我们可以配置一下 formColShow 属性 。
"formColShow": {"90": {// 组件ID"1": [90, 101, 100, 102, 105],// 组件值对应的需要显示的组件ID，下同"2": [90, 120, 121],"3": [90, 110, 114, 112, 113, 115, 116],"4": [90, 150, 151, 152, 153, 160, 162]}},配置好之后就可以实现了，表单控件内部代码会做一个 watch 监听：
// 数据变化，联动组件的显示if (typeof props.formColShow !== 'undefined') {for (const key in props.formColShow) {const ctl = props.formColShow[key]const colName = props.itemMeta[key].colName// 监听组件的值，有变化就重新设置局部modelwatch(() => formModel[colName], (v1, v2) => {if (typeof ctl[v1] === 'undefined') {// 没有设定，显示默认组件setFormColSort()} else {// 按照设定显示组件setFormColSort(ctl[v1])// 设置部分的 modelcreatePartModel(ctl[v1])}})}json格式整个表单是依据 json 动态渲染出来的，那么json格式是啥样的呢？分为两个部分，一个是表单控件自己需要的属性，另一个是表单子控件需要的属性，还有验证规则等 。
{"formTest": {"baseProps": { // 表单控件自己的属性"formColCount": 1, // 列数"colOrder": [ // 需要显示的组件的ID90,101, 102,110, 111, 114, 112, 113, 115, 116,120, 121, 100,150, 151, 152, 153,160, 162]},"formColShow": { // 组件联动的信息"90": { // 触发的组件"1": [90, 101, 100, 102, 105], // 组件值对应的需要显示的组件的ID"2": [90, 120, 121],"3": [90, 110, 114, 112, 113, 115, 116],"4": [90, 150, 151, 153, 152, 160, 162]}},"ruleMeta": { // 验证规则"101": [ // 表单子控件的ID，下面是验证规则{ "trigger": "blur", "message": "请输入活动名称", "required": true },{ "trigger": "blur", "message": "长度在 3 到 5 个字符", "min": 3, "max": 5 }]},"itemMeta": { // 表单子控件的属性"90": {"controlId": 90,"colName": "kind","label": "分类","controlType": 153,"isClear": false,"defaultValue": "","placeholder": "分类","title": "编号","optionList": [{"value": 1, "label": "文本类"},{"value": 2, "label": "数字类"},{"value": 3, "label": "日期类"},{"value": 4, "label": "选择类"}],"colCount": 1},"100": {"controlId": 100,"colName": "area","label": "多行文本","controlType": 100,"isClear": false,"defaultValue": 1000,"placeholder": "多行文本","title": "多行文本","colCount": 1},...}}}


推荐阅读


上一篇：Chrome 浏览器快捷命令

下一篇：不要再封装各种Util工具类了，这个神级框架值得拥有