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

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

预览图：

1. 定义组件：

Element-ui中的el-form需要在el-form组件内绑定存入数据的对象，同时每个el-form-item组件有不同的种类，输入框，单选框，复选框等，因此要实现封装就需要判断每个属性的类型，内容大致如下：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2. 使用组件

通过prop接收的父组件数据是form，但是el-form绑定的这个对象是用来储存输入的数据，一定会需要动态修改的，而子组件对于prop属性不太好修改，因此使用监听数据，在prop传入后把它存在data内的formData里：

<el-form 
	ref="form" 
	label-width="100px" 
	:model="formData" 
	:inline="false">
el-form>
1
2
3
4
5
6

3. 监听

然后是Immediate：true，这个属性使第一次传入的时候就监听到，并且通过handler中设置的方法修改，如果启用immediate的话只有第二次修改的时候才会唤起监听调用handler，达不到效果

watch: {
 form: {
   immediate: true,
   // 将porp中内容同步到data里
   handler(news) {
     this.formData = news;
   },
 },
},
1
2
3
4
5
6
7
8
9

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:"",
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

我是本篇文章小编小卜，
遇到Bug需要帮助，
欢迎加wx：
xmzl1988
备注"csdn博客“
温馨提示此为有偿服务;