二次封装el-form--只需配置文件

 兄弟们经过我上班摸鱼，最近摸了很多组件，一点点分享给大家。大佬们就别看了，二次封装很简单哦。我是根据element+封装的。大家在封装时，根据文档的api一步步实现。我给大家说说简单的思路。具体代码请看：https://gitee.com/liu--zicheng/vue3-vite-template/blob/master/src/components/ui/ZcForm.vue

其中也有table封装，包括搜索栏一键生成0。 

根据上面代码，大家来找相同的部分，然后通过配置的形式传入即可，是不是很简单。下面给大家分享我的配置文件。

 

import { formConfig } from "./../../../config/formConfig";

export const FormConfig = formConfig({
  formItems: [
    {
      label: "表单1",
      type: "number",
      otherOptions: {
        placeholder: "请输入账号",
      },
      prop: "account",
      rules: [
        {
          required: true,
          message: "请输入账号",
          trigger: "change",
        },
        {
          validator: (rule, value, callback) => {
            console.log("....", typeof value);
            if (value.length < 3 && value.length > 1) {
              callback(new Error("请输入长度大于3"));
            }
          },
          trigger: "change",
        },
      ],
    },
    {
      label: "表单2",
      type: "password",
      prop: "password",
      otherOptions: {
        placeholder: "请输入密码",
      },
      rules: [{ required: true, message: "请输入密码" }],
    },
    {
      label: "表单3",
      type: "datepicker",
      otherOptions: {
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间",
        type: "daterange",
        "unlink-panels": true,
        // disabled: true,
      },
      prop: "date",
      rules: [{ required: true, message: "请选择日期" }],
    },

    {
      label: "表单4",
      type: "select",
      otherOptions: {
        placeholder: "请选择部门",
        clearable: true,
        multiple: true,
      },
      prop: "dep",
      valueEnum: {
        1: "部门1",
        2: "部门2",
        3: "部门3",
        4: "部门4",
        5: "部门5",
        6: "部门6",
      },
      rules: [{ required: true, message: "请选择", trigger: "blur" }],
      width: 100,
    },
  ],
  labelWidth: "100px",
  //   itemColLayout: {
  //     // span: 8,
  //   },
  //   itemStyle: {
  //     padding: "",
  //   },
});

 这个配置文件，组件不需要动，除非有情况没有考虑，或者代码不严谨。大家可以根据情况书写自己的组件。

然后看看组件内部写法。