【vue】elmentUI封装自定义表单组件

前言：由于项目中多处需要使用表单，为了提高代码复用性，需要做一些简单的封装，这里使用vue+elmentUI

预览图：

image.png

1. 定义组件：

<el-form ref="form" label-width="100px" :model="formData" :inline="false">
 <el-form-item
   v-for="(item, index) in formLabel"
   :key="index"
   :label="item.label"
 >
   <el-input
     v-if="item.type === 'input'"
     :placeholder="'请输入' + item.label"
     v-model="formData[item.model]"
   >
   </el-input>
   <el-select
     v-if="item.type === 'select'"
     :placeholder="'请选择' + item.label"
     v-model="formData[item.model]"
   >
     <el-option
       v-for="(option, index) in item.option"
       :key="index"
       :label="option.label"
       :value="option.value"
     ></el-option>
   </el-select>
   <el-date-picker
     v-if="item.type === 'date'"
     :placeholder="'请选择' + item.label"
     v-model="formData[item.model]"
   ></el-date-picker>
</el-form-item>

2. 使用组件

<el-form 
    ref="form" 
    label-width="100px" 
    :model="formData" 
    :inline="false">
</el-form>

3. 监听

watch: {
 form: {
   immediate: true,
   // 将porp中内容同步到data里
   handler(news) {
     this.formData = news;
   },
 },
},

4. 配置数据

formLabel: [
  {
    type: "input",
    model: "username",
    label: "用户名",
  },
  {
    type: "radio",
    model: "gender",
    label: "性别",
    radio: ["男", "女"],
  },
  {
    type: "input",
    model: "age",
    label: "年龄",
  },
  {
    type: "select",
    model: "userType",
    label: "用户类型",
      option: [
      {
        label: "普通用户",
        value: 0,
      },
      {
        label: "管理员用户",
        value: 1,
      },
    ],
  },
],

form: {
  username: "",
  gender: "",
  age: "",
  userType: "",
},
formType: {
  url:"",
  type:"",
},