配置化el-form的二次封装之思路分析附上代码可直接使用

问题描述

个人愚见编写代码其实就是：

• 学习规则（看官方文档）
• 使用规则（在使用的过程中进一步理解官方文档）
• 最终基于原有底层官方文档规则再自定义新规则（封装新的规则，便于复用）

所以本文讲述一下基于原有的el-form的规则，进行二次封装自定义新的规则的思路，以及附上能直接用的代码。我们先看一下效果图：

效果图

思路分析

最终效果是配置化“写代码”，就像echarts一样，写不同的配置，出现不同的效果，自然是配置，所以就要提前考虑好有哪些需要配置。当然也要考虑数据的回显。

• 配置表单项类型（组件中要加上校验规则）
• 配置表单项的名字
• 配置表单项的字段
• 配置表单项是否必填
• 配置输入框的单位（如果有的话）
• 配置placeholder的文本提示
• 配置下拉框选项数据数据（如果是固定的下拉框可以传过去）
• 如果是枚举值类型的下拉框就需要发请求获取下拉框选项数组数据
  等...

这里要多提一下表单项类型

配置表单项~输入框的类型

首先我们要清楚form表单项的类型，这里为了便于理解，只举例三种大类型，当然大类型中也包含小类型，同时也要做校验。至于别的类型，大家理解了这几个类型以后，就可以自己写了。

• 输入框类型

  • 文本输入框类型（校验得填写，不能为空）
  • 数字输入框类型（校验输入的数字类型，比如需要正整数、需要保留两位小数等）

• 下拉框类型

  • 固定选项的下拉框类型（这里直接写死，传过去即可，比如性别下拉框，只有男女两种类型选项）
  • 枚举多个选项的单选下拉框类型（需要提前发请求获取数据，或者visible-change事件发请求获取）
  • 枚举多个选项的单选多选下拉框类型（同上）
• 时间选择器范围类型

注意绑定的结果值是数组即可

最后不要忘了回显逻辑哦

el-form表头数据举例

子组件表单数据根据根据父组件传递过来的formHeader动态渲染。即v-for中搭配v-if去呈现，先简单看一下formHeader数据结构，具体在后边代码中都有的

// 表头数组数据
      formHeader: [
        {
          itemType: "text", // 输入框类型
          labelName: "姓名", // 输入框名字
          propName: "name", // 输入框字段名
          isRequired: true, // 是否必填
          placeholder: "请填写名字", // 输入框placeholder提示语加上，可用于告知用户规则
        },
        {
          itemType: "number",
          labelName: "年龄",
          propName: "age",
          isRequired: true,
          unit: "year", // 数字类型的要有单位
          placeholder: "请输入年龄（大于0的正整数）",
        },
        {
          itemType: "selectOne", // 下拉框类型一，固定的选项可以写死在配置里，比如性别只有男女
          labelName: "性别",
          propName: "gender",
          isRequired: true,
          placeholder: "请选择性别",
          optionsArr: [
            {
              label: "男",
              value: 1,
            },
            {
              label: "女",
              value: 2,
            },
          ],
        },
      ],

完整代码

建议复制粘贴，运行跑起来，这样效果更加明显，更便于理解。
毕竟：no words,show codes

父组件传递配置数据

封装的子组件根据传递的配置数据动态渲染

好记性不如烂笔头，记录一下吧。欢迎批评指正 ^_^