Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件

时间:2024-01-28 15:09:20

Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件

2021-02-22 14:34  金色海洋(jyk)  阅读(0)  评论(0编辑  收藏

一个成熟的表单

表单表单,你已经长大了,你要学会:

  • 动态渲染
  • 支持单列、双列、多列
  • 支持调整布局
  • 支持表单验证
  • 支持调整排列(显示)顺序
  • 依据组件值显示需要的组件
  • 支持 item 扩展组件
  • 可以自动创建 model

这个表单控件是基于 element-plus 的 el-form 做的二次封装,所以首先感谢 element-plus 提供了这么强大的UI库,以前用 jQuery 做过类似的,但是非常麻烦,既不好看,可维护性、扩展性也差,好多想法都实现不了(技术有限)。
现在好了,站在巨人的肩膀上,实现自己的想法了。

实现动态渲染

把表单需要的属性,统统放入json里面,然后用require(方便) 或者aioxs(可以热更新)加载进来,这样就可以实现动态渲染了。
比如要实现公司信息的添加、修改,那么只需要加载公司信息需要的json即可。
想要实现员工信息的添加、修改,那么只需要加载员工信息需要的json。

总之,加载需要的json即可,不需要再一遍一遍的手撸代码了。

那么这个神奇的 json 是啥样子的呢?文件有点长,直接看截图,更清晰一些。
006动态渲染需要的json.png

另外还有几个附带功能:

  • 支持单行下的合并。
    在单行的情况下,一些短的控件会比较占空间,我们可以把多个小的合并到一行。

  • 支持多行下的扩展。
    多行的情况下,一些长的控件需要占更多的空间,我们可以设置它多占几个格子。

  • 自动创建表单需要的 model。
    不需要手动写 model了。

实现多行多列的表单

再次感谢 el-form,真的很强大,不仅好看,还提供了验证功能,还有很多其他的功能。
只是好像只能横着排,或者竖着排。那么能不能多行多列呢?似乎没有直接提供。

我们知道 el-row、el-col 可以实现多行多列的功能,那么能不能结合一下呢?官网也不直说,害的我各种找,还好找到了。(好吧,其实折腾了一阵着的table)

二者结合一下就可以了,这里有个小技巧,el-row 只需要一个就可以,el-col 可以有多个,这样一行排满后,会自动排到下一行。

    <el-form
      ref="form"
      :inline="false"
      class="demo-form-inline"
      :model="formModel"
      label-suffix=":"
      label-width="130px"
      size="mini"
    >
      <el-row>
        <!--不循环row,直接循环col,放不下会自动往下换行。-->
        <el-col
          v-for="(ctrId, index) in formColSort"
          :key="'form_'+index"
          :span="formColSpan[ctrId]"
        >
          <el-form-item :label="getCtrMeta(ctrId).label">
            <!--表单item组件,采用动态组件的方式-->
            <component
              :is="ctlList[getCtrMeta(ctrId).controlType]"
              v-model="formModel[getCtrMeta(ctrId).colName]"
              :meta="getCtrMeta(ctrId)"
              @myChange="mySubmit">
            </component>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  • formColSort
    存放组件ID的数组,决定了显示哪些组件以及显示的先后顺序。

  • v-for
    遍历 formColSort 得到组件ID,然后获取ID对应的span(确定占位)以及组件需要的meta。

  • formColSpan
    存放组件占位的数组。依据el-col的span的24格设定。

  • getCtrMeta(ctrId)
    根据组件ID获取组件的meta。
    为啥要写个函数呢?因为model的属性不允许中括号套娃,所以只好写个函数。
    为啥不用计算属性呢?计算属性好像不能传递参数。

  • component :is="xxx"
    Vue提供的动态组件,用这个可以方便加载不同类型的子组件。

  • ctlList
    组件字典,把组件类型变成对应的组件标签。

这样一个v-for搞定了很多事情,比如单列、多列,组件的排序问题,组件的占位问题,还有依据用户的选择显示不同的组件的问题,其实就是修改一下 formColSort 里的组件ID的构成和顺序。

自动创建 model

我比较懒,手撸 model 是不是有点麻烦?如果能够自动获得该多好,于是我写了这个函数。

  // 根据表单元素meta,创建 v-model
  const createModel = () => {
    // 依据meta,创建module
    for (const key in formItemMeta) {
      const m = formItemMeta[key]
      // 根据控件类型设置属性值
      switch (m.controlType) {
        case 100: // 文本类
        case 101:
        case 102:
        case 103:
        case 104:
        case 105:
        case 106:
        case 107:
        case 130:
        case 131:
          formModel[m.colName] = ''
          break
        case 110: // 日期
        case 111: // 日期时间
        case 112: // 年月
        case 114: // 年
        case 113: // 年周
          formModel[m.colName] = null
          break
        case 115: // 任意时间
          formModel[m.colName] = '00:00:00'
          break
        case 116: // 选择时间
          formModel[m.colName] = '00:00'
          break
        case 120: // 数字
        case 121:
          formModel[m.colName] = 0
          break
        case 150: // 勾选
        case 151: // 开关
          formModel[m.colName] = false
          break
        case 153: // 单选组
        case 160: // 下拉单选
        case 162: // 下拉联动
          formModel[m.colName] = null
          break
        case 152: // 多选组
        case 161: // 下拉多选
          formModel[m.colName] = []
          break
      }
      // 看看有没有设置默认值
      if (typeof m.defaultValue !== 'undefined') {
        switch (m.defaultValue) {
          case '':
            break
          case '{}':
            formModel[m.colName] = {}
            break
          case '[]':
            formModel[m.colName] = []
            break
          case 'date':
            formModel[m.colName] = new Date()
            break
          default:
            formModel[m.colName] = m.defaultValue
            break
        }
      }
    }
    // 同步父组件的v-model
    context.emit('update:modelValue', formModel)
    return formModel
  }

可以根据类型和默认值,设置 model 的属性,这样就方便多了。

创建用户选择的 model

就是用户选了某个选项,表单的组件响应变化后的model。
在我的计划里面是需要一个这样的简单的model,所以我又写了一个函数

  // 依据用户选项,创建对应的 model
  const createPartModel = (array) => {
    // 先删除属性
    for (const key in formPartModel) {
      delete formPartModel[key]
    }
    // 建立新属性
    for (let i = 0; i < array.length; i++) {
      const colName = formItemMeta[array[i]].colName
      formPartModel[colName] = formModel[colName]
    }
  }

这样就可以得到一个简洁的 model 了。

多列的表单

这个是最复杂的,分为两种情况:单列的挤一挤、多列的抢位置。

单列

007单列表单.png

单列的表单有一个特点,一行比较宽松,那么有时候就需要两个组件在一行里显示,其他的还是一行一个组件,那么要如何调整呢?

这里做一个设定:

  • 一个组件一行的,记做1
  • 两个组件挤一行的,记做-2
  • 三个组件挤一行的,记做-3
    以此类推,理论上最多支持 -24,当然实际上似乎没有这么宽的显示器。

这样记录之后,我们就可以判断,≥1的记做span=24,负数的,用24去除,得到的就是span的数字。当然记得取整数。

为啥用负数做标记呢?就是为了区分开多列的调整。

多列

008双列表单.png

调多了之后发现一个问题,看起来和单列调整后似乎一样的。

009三列表单.png

多列的表单有一个特点,一个格子比较小,有些组件太长放不下,这个时候这个组件就要抢后面的格子来用。

那么我们还是做一个设定:

  • 一个组件占一格的,还是记做1
  • 一个组件占两格的,记做2
  • 一个组件占三格的,记做3
    以此类推。

这样记录之后,我们可以判断,≤1的,记做 24 / 列数,大于1的记做 24/ 列数 * n。
这样就可以了,可以兼容单列的设置,不用因为单列变多列而调整设置。
只是有个小麻烦,占得格子太多的话,就会提取挤到下一行,而本行会出现“空缺”。
这个暂时靠人工调整吧。
毕竟哪个字段在前面,还是需要人工设置的。

一顿分析猛如虎,一看代码没几行。

  // 根据配置里面的colCount,设置 formColSpan
  const setFormColSpan = () => {
    const formColCount = formMeta.formColCount // 列数
    const moreColSpan = 24 / formColCount // 一个格子占多少份

    if (formColCount === 1) {
    // 一列的情况
      for (const key in formItemMeta) {
        const m = formItemMeta[key]
        if (typeof m.colCount === 'undefined') {
          formColSpan[m.controlId] = moreColSpan
        } else {
          if (m.colCount >= 1) {
            // 单列,多占的也只有24格
            formColSpan[m.controlId] = moreColSpan
          } else if (m.colCount < 0) {
            // 挤一挤的情况, 24 除以 占的份数
            formColSpan[m.controlId] = moreColSpan / (0 - m.colCount)
          }
        }
      }
    } else {
      // 多列的情况
      for (const key in formItemMeta) {
        const m = formItemMeta[key]
        if (typeof m.colCount === 'undefined') {
          formColSpan[m.controlId] = moreColSpan
        } else {
          if (m.colCount < 0 || m.colCount === 1) {
            // 多列,挤一挤的占一份
            formColSpan[m.controlId] = moreColSpan
          } else if (m.colCount > 1) {
            // 多列,占的格子数 * 份数
            formColSpan[m.controlId] = moreColSpan * m.colCount
          }
        }
      }
    }
  }

最后看看效果,可以动态设置列数:
【视频一】
https://www.zhihu.com/zvideo/1347091197660405760

依据用户的选择,显示对应的组件

这个也是一个急需的功能,否则的话,动态渲染的表单控件适应性就会受到限制。
其实想想也不难,就是改一下 formColSort 里面的组件ID就好了。
我们设置一个watch来监听组件值的变化,然后把需要的组件ID设置给 formColSort 就可以了。

  // 监听组件值的变化,调整组件的显示以及显示顺序
  if (typeof formMeta.formColShow !== 'undefined') {
    for (const key in formMeta.formColShow) {
      const ctl = formMeta.formColShow[key]
      const colName = formItemMeta[key].colName
      watch(() => formModel[colName], (v1, v2) => {
        if (typeof ctl[v1] === 'undefined') {
          // 没有设定,显示默认组件
          setFormColSort()
        } else {
          // 按照设定显示组件
          setFormColSort(ctl[v1])
          // 设置部分的 model
          createPartModel(ctl[v1])
        }
      })
    }
  }

因为需要监听的组件可能不只一个,所以做了个循环,这样就可以监听所有需要的组件了。

看看效果
【视频二】
https://www.zhihu.com/zvideo/1347099700483457024

完整代码

上面的代码比较凌乱,这里整体介绍一下。

  • el-form-manage.js
    表单组件的管理类,单独拿出来,这样就可以支持其他UI库了,比如antdv
import { reactive, watch } from 'vue'

/**
 * 表单的管理类
 * * 创建v-model
 * * 调整列数
 * * 合并
 */
const formManage = (props, context) => {
  // 定义 完整的 v-model
  const formModel = reactive({})
  // 定义局部的 model
  const formPartModel = reactive({})

  // 确定一个组件占用几个格子
  const formColSpan = reactive({})
  // 定义排序依据
  const formColSort = reactive([])
  // 获取表单meta
  const formMeta = props.meta
  console.log('formMeta', formMeta)
  // 表单元素meta
  const formItemMeta = formMeta.itemMeta
  // 表单验证meta,备用
  // const formRuleMeta = formMeta.ruleMeta

  // 根据表单元素meta,创建 v-model
  const createModel = () => {
    // 依据meta,创建module
    for (const key in formItemMeta) {
      const m = formItemMeta[key]
      // 根据控件类型设置属性值
      switch (m.controlType) {
        case 100: // 文本类
        case 101:
        case 102:
        case 103:
        case 104:
        case 105:
        case 106:
        case 107:
        case 130:
        case 131:
          formModel[m.colName] = ''
          break
        case 110: // 日期
        case 111: // 日期时间
        case 112: // 年月
        case 114: // 年
        case 113: // 年周
          formModel[m.colName] = null
          break
        case 115: // 任意时间
          formModel[m.colName] = '00:00:00'
          break
        case 116: // 选择时间
          formModel[m.colName] = '00:00'
          break
        case 120: // 数字
        case 121:
          formModel[m.colName] = 0
          break
        case 150: // 勾选
        case 151: // 开关
          formModel[m.colName] = false
          break
        case 153: // 单选组
        case 160: // 下拉单选
        case 162: // 下拉联动
          formModel[m.colName] = null
          break
        case 152: // 多选组
        case 161: // 下拉多选
          formModel[m.colName] = []
          break
      }
      // 看看有没有设置默认值
      if (typeof m.defaultValue !== 'undefined') {
        switch (m.defaultValue) {
          case '':
            break
          case '{}':
            formModel[m.colName] = {}
            break
          case '[]':
            formModel[m.colName] = []
            break
          case 'date':
            formModel[m.colName] = new Date()
            break
          default:
            formModel[m.colName] = m.defaultValue
            break
        }
      }
    }
    // 同步父组件的v-model
    context.emit('update:modelValue', formModel)
    return formModel
  }
  // 先运行一次
  createModel()

  // 向父组件提交 model
  const mySubmit = (val, controlId, colName) => {
    context.emit('update:modelValue', formModel)
    // 同步到部分model
    if (typeof formPartModel[colName] !== 'undefined') {
      formPartModel[colName] = formModel[colName]
    }
    context.emit('update:partModel', formPartModel)
  }

  // 依据用户选项,创建对应的 model
  const createPartModel = (array) => {
    // 先删除属性
    for (const key in formPartModel) {
      delete formPartModel[key]
    }
    // 建立新属性
    for (let i = 0; i < array.length; i++) {
      const colName = formItemMeta[array[i]].colName
      formPartModel[colName] = formModel[colName]
    }
  }

  // 根据配置里面的colCount,设置 formColSpan
  const setFormColSpan = () => {
    const formColCount = formMeta.formColCount // 列数
    const moreColSpan = 24 / formColCount // 一个格子占多少份

    if (formColCount === 1) {
    // 一列的情况
      for (const key in formItemMeta) {
        const m = formItemMeta[key]
        if (typeof m.colCount === 'undefined') {
          formColSpan[m.controlId] = moreColSpan
        } else {
          if (m.colCount >= 1) {
            // 单列,多占的也只有24格
            formColSpan[m.controlId] = moreColSpan
          } else if (m.colCount < 0) {
            // 挤一挤的情况, 24 除以 占的份数
            formColSpan[m.controlId] = moreColSpan / (0 - m.colCount)
          }
        }
      }
    } else {
      // 多列的情况
      for (const key in formItemMeta) {
        const m = formItemMeta[key]
        if (typeof m.colCount === 'undefined') {
          formColSpan[m.controlId] = moreColSpan
        } else {
          if (m.colCount < 0 || m.colCount === 1) {
            // 多列,挤一挤的占一份
            formColSpan[m.controlId] = moreColSpan
          } else if (m.colCount > 1) {
            // 多列,占的格子数 * 份数
            formColSpan[m.controlId] = moreColSpan * m.colCount
          }
        }
      }
    }
  }
  // 先运行一次
  setFormColSpan()

  // 设置组件的显示顺序
  const setFormColSort = (array = formMeta.colOrder) => {
    formColSort.length = 0
    formColSort.push(...array)
  }
  // 先运行一下
  setFormColSort()

  // 监听组件值的变化,调整组件的显示以及显示顺序
  if (typeof formMeta.formColShow !== 'undefined') {
    for (const key in formMeta.formColShow) {
      const ctl = formMeta.formColShow[key]
      const colName = formItemMeta[key].colName
      watch(() => formModel[colName], (v1, v2) => {
        if (typeof ctl[v1] === 'undefined') {
          // 没有设定,显示默认组件
          setFormColSort()
        } else {
          // 按照设定显示组件
          setFormColSort(ctl[v1])
          // 设置部分的 model
          createPartModel(ctl[v1])
        }
      })
    }
  }

  return {
    // 对象
    formModel, // v-model createModel()
    formPartModel, // 用户选择的组件的 model
    formColSpan, // 确定组件占位
    formColSort, // 确定组件排序
    // 函数
    createModel, // 创建 v-model
    setFormColSpan, // 设置组件占位
    setFormColSort, // 设置组件排序
    mySubmit // 提交
  }
}

export default formManage

  • el-form-map.js
    动态组件需要的字典
import { defineAsyncComponent } from 'vue'

/**
 * 组件里面注册控件用
 * * 文本
 * ** eltext 单行文本、电话、邮件、搜索
 * ** elarea 多行文本
 * ** elurl
 * * 数字
 * ** elnumber 数字
 * ** elrange 滑块
 * * 日期
 * ** eldate 日期、年月、年周、年
 * ** eltime 时间
 * * 选择
 * ** elcheckbox 勾选
 * ** elswitch 开关
 * ** elcheckboxs 多选组
 * ** elradios 单选组
 * ** elselect 下拉选择
 */
const formItemList = {
  // 文本类 defineComponent
  eltext: defineAsyncComponent(() => import('./t-text.vue')),
  elarea: defineAsyncComponent(() => import('./t-area.vue')),
  elurl: defineAsyncComponent(() => import('./t-url.vue')),
  // 数字
  elnumber: defineAsyncComponent(() => import('./n-number.vue')),
  elrange: defineAsyncComponent(() => import('./n-range.vue')),
  // 日期、时间
  eldate: defineAsyncComponent(() => import('./d-date.vue')),
  eltime: defineAsyncComponent(() => import('./d-time.vue')),
  // 选择、开关
  elcheckbox: defineAsyncComponent(() => import('./s-checkbox.vue')),
  elswitch: defineAsyncComponent(() => import('./s-switch.vue')),
  elcheckboxs: defineAsyncComponent(() => import('./s-checkboxs.vue')),
  elradios: defineAsyncComponent(() => import('./s-radios.vue')),
  elselect: defineAsyncComponent(() => import('./s-select.vue')),
  elselwrite: defineAsyncComponent(() => import('./s-selwrite.vue'))
}

/**
 * 动态组件的字典,便于v-for循环里面设置控件
 */
const formItemListKey = {
  // 文本类
  100: formItemList.elarea, // 多行文本
  101: formItemList.eltext, // 单行文本
  102: formItemList.eltext, // 密码
  103: formItemList.eltext, // 电话
  104: formItemList.eltext, // 邮件
  105: formItemList.elurl, // url
  106: formItemList.eltext, // 搜索
  // 数字
  120: formItemList.elnumber, // 数组
  121: formItemList.elrange, // 滑块
  // 日期、时间
  110: formItemList.eldate, // 日期
  111: formItemList.eldate, // 日期 + 时间
  112: formItemList.eldate, // 年月
  113: formItemList.eldate, // 年周
  114: formItemList.eldate, // 年
  115: formItemList.eltime, // 任意时间
  116: formItemList.eltime, // 选择固定时间
  // 选择、开关
  150: formItemList.elcheckbox, // 勾选
  151: formItemList.elswitch, // 开关
  152: formItemList.elcheckboxs, // 多选组
  153: formItemList.elradios, // 单选组
  160: formItemList.elselect, // 下拉
  161: formItemList.elselwrite, // 下拉多选
  162: formItemList.elselect // 下拉联动

}

export default {
  formItemList,
  formItemListKey
}

  • el-form-div.vue
    表单控件的代码
    模板
  <div >
    <el-form
      ref="form"
      :inline="false"
      class="demo-form-inline"
      :model="formModel"
      label-suffix=":"
      label-width="130px"
      size="mini"
    >
      <el-row>
        <!--不循环row,直接循环col,放不下会自动往下换行。-->
        <el-col
          v-for="(ctrId, index) in formColSort"
          :key="'form_'+index"
          :span="formColSpan[ctrId]"
        >
          <el-form-item :label="getCtrMeta(ctrId).label">
            <!--表单item组件,采用动态组件的方式-->
            <component
              :is="ctlList[getCtrMeta(ctrId).controlType]"
              v-model="formModel[getCtrMeta(ctrId).colName]"
              :meta="getCtrMeta(ctrId)"
              @myChange="mySubmit">
            </component>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>

js

import { watch } from 'vue'
import elFormConfig from '@/components/nf-el-form/el-form-map.js'
import formManage from '@/components/nf-el-form/el-form-manage.js'

export default {
  name: 'el-form-div',
  components: {
    ...elFormConfig.formItemList
  },
  props: {
    modelValue: Object,
    partModel: Object,
    meta: Object
  },
  setup (props, context) {
    // 控件字典
    const ctlList = elFormConfig.formItemListKey

    // 表单管理类
    const {
      formModel, // 依据meta,创建 Model
      formColSpan, // 依据meta,创建 span
      formColSort,
      setFormColSpan,
      setFormColSort, // 设置组件排序
      mySubmit
    } = formManage(props, context)

    // 监听列数的变化
    watch(() => props.meta.formColCount, (v1, v2) => {
      setFormColSpan()
    })
    // 监听reload
    watch(() => props.meta.reload, (v1, v2) => {
      setFormColSpan()
      setFormColSort()
    })

    // 监听组件值的变化,
    // 依据ID获取组件的meta,因为model不支持【】嵌套
    const getCtrMeta = (id) => {
      return props.meta.itemMeta[id] || {}
    }

    return {
      formModel,
      formColSpan,
      formColSort,
      ctlList,
      getCtrMeta,
      mySubmit
    }
  }
}

这里就简单多了,因为实现具体功能的js代码都分离出去了。要么做成子组件,要么组成独立的js文件。
这里主要就是负责重新渲染表单组件。

表单验证

这个使用 el-form 提供的验证功能。
目前暂时还没有归纳好 el-form 的验证,因为需要把这个验证用的数据写入到json里面,然后读取出来设置好即可。
所以肯定没难度,只是需要点时间。

支持 扩展组件

自带的组件肯定是不够的,因为用户的需求总是千变万化的,那么新组件如何加入到表单控件里面呢?可以按照接口定义封装成符合要求的组件,然后做一个map字典,就可以设置进去了。

因为接口统一,所以可以适应表单控件的调用。

简单的方法是,直接修改两个js文件。
如果不方便修改的话,也可以通过属性传递进来。目前暂时还没有想好细节,不过似乎不是太难。

源码

https://github.com/naturefwvue/nf-vue-element