element form表单组件二次封装

element form表单组件二次封装

效果图

组件封装

<template>
  <el-form
    ref="form"
    :model="localForm"
    :rules="rules"
    :label-width="labelWidth"
    class="width300-input base-form"
    :disabled="onlyLook"
  >
    <el-row>
      <el-col v-for="(item, index) in options" :key="index" :span="12">
        <div v-for="(it, idx) in item.col" :key="idx">
          <!-- input 输入框 -->
          <template v-if="it.type === 0">
            <el-form-item :label="it.label" :prop="it.prop">
              <el-input v-model="localForm[it.prop]" :disabled="it.disabled" />
            </el-form-item>
          </template>
          <!-- textarea 输入框 -->
          <template v-if="it.type === 1">
            <el-form-item :label="it.label" :prop="it.prop">
              <el-input
                v-model="localForm[it.prop]"
                :rows="5"
                type="textarea"
                :disabled="it.disabled"
              />
            </el-form-item>
          </template>
          <!-- select 下拉框 -->
          <template v-if="it.type === 2">
            <el-form-item :label="it.label" :prop="it.prop">
              <el-select
                v-model="localForm[it.prop]"
                :disabled="it.disabled"
                placeholder="请选择"
              >
                <el-option
                  v-for="(o, oIndex) in it.options"
                  :key="oIndex"
                  :label="o.name"
                  :value="o.code"
                />
              </el-select>
            </el-form-item>
          </template>
          <!-- 时间框 -->
          <template v-if="it.type === 3">
            <el-form-item :label="it.label" :prop="it.prop">
              <el-date-picker
                v-model="localForm[it.prop]"
                type="date"
                placeholder="选择日期"
                value-format="timestamp"
              />
            </el-form-item>
          </template>
          <template v-if="it.type === 3.1">
            <el-form-item :label="it.label" :prop="it.prop">
              <el-date-picker
                v-model="localForm[it.prop]"
                type="daterange"
                range-separator="到"
                start-placeholder="起始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
              />
            </el-form-item>
          </template>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <slot name="form" :form="localForm" />
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: {
    // 表单配置
    options: {
      type: Array,
      required: true,
    },
    // label标题长度
    labelWidth: {
      type: String,
      default: "120px",
    },
    // 修改查看时传入表单
    form: {
      type: Object,
      default: () => {
        return null;
      },
    },
    // 是否开启验证
    isVerify: {
      type: Boolean,
      default: false,
    },
    onlyLook: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      localForm: {},
      rules: {},
    };
  },
  watch: {
    form: {
      deep: true,
      handler(val) {},
    },
  },
  created() {
    this.getRules();
  },
  methods: {
    getForm() {
      const options = this.options;
      let form = this.form;

      if (form) {
        this.localForm = JSON.parse(JSON.stringify(form));
        return;
      }
      form = {};
      options.forEach((item) => {
        item.col.forEach((it) => {
          form[it.prop] = "";
        });
      });
      this.localForm = form;
    },
    getRules() {
      console.log(this.isVerify, "vv");
      if (!this.isVerify) {
        return;
      }
      const options = this.options;
      const rules = this.rules;
      options.forEach((item) => {
        item.col.forEach((it) => {
          if (it.required) {
            let message = "";
            let trigger = "blur";
            switch (it.type) {
              case 0:
              case 1:
                message = `请填写${it.label}`;
                break;
              case 2:
              case 3:
                message = `请选择${it.label}`;
                trigger = "change";
                break;
            }
            console.log("4a");
            const rule = [
              {
                required: true,
                message,
                trigger,
              },
            ];
            rules[it.prop] = rule;
          }
        });
      });
      console.log(this.rules, "reuls");
    },
    resetForm() {
      this.$refs.form.resetFields();
      return this.localForm;
    },
  },
};
</script>

页面使用

<BaseForm
  ref="baseForm"
  :options="searchFormOptions"
  :label-width="searchFormLabelWidth"
>
  <template #form="{ form }">
    <el-form-item>
       <el-button
         type="primary"
         @click="handleSearch(form)"
       >查询</el-button>
      <el-button @click="resetSearch(form)">重置</el-button>
    </el-form-item>
  </template>
</BaseForm>

*** 数据配置

// 查询表单
      searchFormOptions: [
        {
          col: [
            {
              label: '名称',
              prop: 'name',
              type: 0
            },
            {
              label: '编号',
              prop: 'number',
              type: 0
            },
            {
              label: '款项',
              prop: 'items',
              type: 2,
              options: ''
            }
          ]
        },
        {
          col: [
            {
              label: '号码',
              prop: 'code',
              type: 0
            },
            {
              label: '合同编号',
              prop: 'XXXXXXXX',
              type: 0
            },
            {
              label: '人员',
              prop: 'XXXXXXX',
              type: 0
            }
          ]
        }
      ],
      searchFormLabelWidth: '130px',

注意：使用前要注册组件哦