组件封装form表单

<template>
  <div class="search_input">
    <el-form
      :size="size"
      inline
      :model="searchData"
      :rules="rules"
      ref="searchForm"
      :label-width="labelWidth"
    >
      <el-form-item
        v-for="item in searchForm"
        :label="item.label"
        :key="item.prop"
        :prop="item.prop"
        :style="item.style"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'Input'"
          class="form_input"
          v-model="searchData[item.prop]"
          :placeholder="item.placeholder"
        ></el-input>

        <!-- 密码框 -->
        <el-input
          v-if="item.type === 'password'"
          disabled
          v-model="searchData[item.prop]"
          :placeholder="item.placeholder"
          auto-complete="off"
        >
          <template slot="append">
            <span @click="item.onClick">{{ item.name }}</span>
          </template>
        </el-input>

        <!-- 下拉框 -->
        <!-- $forceUpdate() 下拉刷新,修复数据改变下拉框不变的bug -->
        <el-select
          v-if="item.type === 'Select'"
          v-model="searchData[item.prop]"
          @change="item.change(searchData[item.prop])"
          :placeholder="item.placeholder"
          @visible-change="$forceUpdate()"
        >
          <el-option
            v-for="op in item.options"
            :label="op.label"
            :value="op.value"
            :key="op.value"
          >{{ op.label }}</el-option>
        </el-select>

        <!-- 单选 -->
        <el-radio-group
          v-if="item.type === 'Radio'"
          v-model="searchData[item.prop]"
        >
          <el-radio
            v-for="ra in item.radios"
            :label="ra.value"
            :key="ra.value"
          >{{ ra.label }}</el-radio>
        </el-radio-group>

        <!-- 组合单选按钮 -->
        <el-radio-group
          v-if="item.type === 'RadioButton'"
          v-model="searchData[item.prop]"
          @change="item.change && item.change(searchData[item.prop])"
        >
          <el-radio-button
            v-for="ra in item.radios"
            :label="ra.value"
            :key="ra.value"
          >{{ ra.label }}</el-radio-button>
        </el-radio-group>

        <!-- 复选框 -->
        <el-checkbox-group
          v-if="item.type === 'Checkbox'"
          v-model="searchData[item.prop]"
        >
          <el-checkbox
            v-for="ch in item.checkboxs"
            :label="ch.value"
            :key="ch.value"
          >{{ ch.label }}</el-checkbox>
        </el-checkbox-group>

        <!-- 日期 -->
        <el-date-picker
          v-if="item.type === 'Date'"
          v-model="searchData[item.prop]"
          value-format="yyyy-MM-dd"
          @change="item.change(searchData[item.prop])"
          :placeholder="item.placeholder"
        >
        </el-date-picker>

        <!-- 时间 -->
        <el-time-select
          v-if="item.type === 'Time'"
          v-model="searchData[item.prop]"
        >
        </el-time-select>

        <!-- 日期时间 -->
        <el-date-picker
          v-if="item.type === 'DateTime'"
          type="datetime"
          v-model="searchData[item.prop]"
          :placeholder="item.placeholder"
          value-format="yyyy-MM-dd hh:mm:ss"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(searchData[item.prop])"
        >
        </el-date-picker>

        <!-- 起止时间 -->
        <el-date-picker
          v-if="item.type === 'Daterange'"
          v-model="searchData[item.prop]"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="item.change(searchData[item.prop])"
        >
        </el-date-picker>
        <!-- 起止时间 -- 双picker -->
        <template v-if="item.type === 'doubleDate'">
          <el-date-picker
            v-model="searchData[item.propStart]"
            value-format="yyyy-MM-dd"
            :picker-options="item.pickerBeginDateBefore"
            @change="item.change(searchData[item.propStart])"
            :placeholder="item.placeholder"
          >
          </el-date-picker>
          <span> 到 </span>
          <el-date-picker
            v-model="searchData[item.propEnd]"
            value-format="yyyy-MM-dd"
            :picker-options="item.pickerBeginDateAfter"
            @change="item.change(searchData[item.propEnd])"
            :placeholder="item.placeholder"
          >
          </el-date-picker>
        </template>

        <!-- 滑块 -->
        <el-slider
          v-if="item.type === 'Slider'"
          v-model="searchData[item.prop]"
        >
        </el-slider>

        <!-- 开关 -->
        <el-switch
          v-if="item.type === 'Switch'"
          v-model="searchData[item.prop]"
        >
        </el-switch>

        <!-- 三级联动 cascader -->
        <el-cascader
          v-if="item.type === 'cascader'"
          :options="item.props.options"
          v-model="searchData[item.prop]"
          :placeholder="item.props.placeholder || '请选择'"
          :disabled="item.props.disabled || false"
          :props="item.props.defaultParams"
          @change="item.change(searchData[item.prop], item)"
        >
        </el-cascader>
      </el-form-item>
      <!-- button 操作按钮 -->
      <el-form-item
        class="search_input_button"
        v-if="isHandle"
      >
        <el-button
          v-for="item in searchHandle"
          :key="item.label"
          :type="item.type"
          @click="item.handle()"
        >
          <template v-if="!item.hide">
            <span>{{ item.label }}</span>
          </template>

        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    isHandle: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: "120px"
    },
    size: {
      type: String,
      default: "medium"
    },
    searchForm: {
      type: Array,
      default: () => []
    },
    searchHandle: {
      type: Array,
      default: () => []
    },
    searchData: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    // 解析表单的正则验证
    rules () {
      let rules = this.searchForm.reduce((map, i) => {
        if (i.rules) {
          map[i.prop] = i.rules;
        }
        return map;
      }, {});
      return rules;
    }
  },
}
</script>

引用组件

<template>
    <div class="baseInfo">
      <form-submit class="searchInput"
                            labelWidth="100px"
                            ref="searchForm"
                           :searchData="searchData"
                           :searchForm="searchForm" />
   </div>
</template>
<script>
import form-submit from "@/components/common/form-submit";
export default {
  components: {
    form-submit
  },
  data() {
    let caseState = [
      { label: "男", value: 1 },
      { label: "女", value: 2 }
    ];
    let entrustProps = { label: "label", value: "value" };
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      // 如果数据要回显后不可编辑，使用JSON.parse(JSON.stringify())转换
      searchData: {},
      searchForm: [
        {
          type: "Input",
          label: "人员姓名",
          prop: "name",
          width: "180px",
          placeholder: "请输入",
          // 表单验证
          rules: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
        },
        {
          type: "Input",
          label: "手机号",
          prop: "phone",
          width: "180px",
          placeholder: "请输入",
          rules: [{ required: true, validator: checkPhone, trigger: "blur" }]
        },

        {
          type: "Select",
          label: "性别",
          prop: "sex",
          // 渲染数组
          options: caseState,
          // 下拉转换
          props: entrustProps,
          change: row => "",
          placeholder: "请选择性别",
          rules: [{ required: true, message: "请选择性别", trigger: "change" }]
        },
        {
          type: "Select",
          label: "所属公司",
          prop: "companyId",
          options: [],
          props: entrustProps,
          change: row => {
            this.changeCompany(row);
          },
          placeholder: "请选择所属公司",
          rules: [{ required: true, message: "请选择所属公司", trigger: "change" }]
        },
        {
          type: "Select",
          label: "所属部门",
          prop: "deptId",
          options: [],
          props: entrustProps,
          change: row => {
            this.changeDepar(row);
          },
          placeholder: "请选择所属部门",
          rules: [{ required: true, message: "请选择所属部门", trigger: "change" }]
        },
        {
          type: "Select",
          label: "当前职务",
          prop: "postId",
          options: [],
          props: entrustProps,
          change: row => {
            this.changePosition(row);
          },
          placeholder: "请选择当前职务",
          rules: [{ required: true, message: "请选择当前职务", trigger: "change" }]
        }
      ],
      ruleForm: {}
    };
  },
  methods: {
    // 下拉选择分公司，查询部门数据
    changeCompany(row) {
    },
    // 下拉选择部门，查询职位数据
    changeDepar(row) {
    },
    // 职位下拉事件
    changePosition(row) {
    }
  }
};
</script>