在我们的日常开发中，尤其是后台管理系统中，大量使用了elementui的表单组件。 对于能够少写一行代码，再也不用多写一个字母的程序员来说，重新封装常用的组件是非常有用的。 必要的。
封装思想可以动态生成表单控件，并通过传入参数实现父子组件之间的交互。 代码的可读性很高。 第一步
首先，我们需要传入两个最重要的参数。 第一个是与表单单向绑定的表单，第二个是配置项参数。 那么配置项参数有哪些呢？ 这意味着我们需要遍历链表中的对象，获取对象中的变量，并通过变量值来判断是否使用这些表单控件。 上面的代码：
FormData: [
{
type: "Upload",
label: "封面",
prop: "cover",
placeholder: "请输入封面"
},
{
type: "Input",
label: "书名",
prop: "bookName",
placeholder: "请输入书名",
rules: [
{ required: true, message: "该选项不能为空", trigger: "blur" }
]
}
]
明显的：
一旦参数传入，组件就必须接收它们，所以代码如下：
props: {
isHandle: {
type: Boolean,
default: true
},
labelWidth: {
type: String,
default: "120px"
},
size: {
type: String,
default: "medium"
},
FormData: {
type: Array,
default: () => []
},
addForm: {
type: Object,
default: () => {}
},
searchHandle: {
type: Array,
default: () => []
}
},
父组件传入参数，子组件接收props。 大家都知道，我就不多解释了。 这是接收参数的类型限制。 如果不明白elementui change传参数，可以去VUE官网查找相关API。
/** 解析表单的正则验证***/
rules() {
let rules = this.FormData.reduce((map, i) => {
if (i.rules) {
map[i.prop] = i.rules;
}
return map;
}, {});
return rules;
}
收到配置项后，使用reduce遍历并返回规则。
第2步
表单提交也需要关键操作，那么如何将父组件的方法传递给子组件呢？ 这里elementui change传参数，ref用于绑定dom元素，$emit用于兄弟组件之间传递值。 上面的代码：
组件
// 验证表单
sublime() {
// 父组件的点击事件
this.$refs["FormData"].validate(valid => {
if (valid) {
this.$emit("sublime", valid);
} else {
return false;
}
});
},
// 重置表单
reset() {
this.$refs["FormData"].resetFields();
}
父组件：
//增加书籍提交表单方法
submitForm(valid) {
if (valid) {
dosomething.....
} else {
return false;
}
},
这样子父组件就可以获取到子组件的校准规则返回参数。
resetForm() {
this.$refs.FormData.reset();
this.$message.success("表单已重置");
},
// 提交操作
notify() {
this.$refs.FormData.sublime();
}
上面的基本思路是这样的
<template>
<div class="search_input">
<el-form
:addForm="addForm"
:FormData="FormData"
:size="size"
inline
:model="addForm"
:rules="rules"
ref="FormData"
:label-width="labelWidth"
>
<el-form-item v-for="item in FormData" :label="item.label" :key="item.prop" :prop="item.prop">
<el-input
v-if="item.type === 'Input'"
v-model="addForm[item.prop]"
:placeholder="item.placeholder"
></el-input>
<el-input
v-if="item.type === 'password'"
v-model="addForm[item.prop]"
:placeholder="item.placeholder"
auto-complete="off"
show-password
></el-input>
<el-slider v-if="item.type === 'Slider'" v-model="addForm[item.prop]"></el-slider>
<el-radio-group v-if="item.type === 'Radio'" v-model="addForm[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 === 'RadioRadio'"
v-model="addForm[item.prop]"
@change="item.change && item.change(addForm[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="addForm[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="addForm[item.prop]"
value-format="yyyy-MM-dd"
@change="item.change(addForm[item.prop])"
:placeholder="item.placeholder"
></el-date-picker>
<el-time-select v-if="item.type === 'Time'" v-model="addForm[item.prop]"></el-time-select>
<el-date-picker
v-if="item.type === 'DateTime'"
type="datetime"
v-model="addForm[item.prop]"
:placeholder="item.placeholder"
value-format="yyyy-MM-dd hh:mm:ss"
:disabled="item.disable && item.disable(addForm[item.prop])"
@change="item.change(addForm[item.prop])"
></el-date-picker>
<el-date-picker
v-if="item.type === 'Daterange'"
v-model="addForm[item.prop]"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
@change="item.change(addForm[item.prop])"
></el-date-picker>
<el-switch v-if="item.type === 'Switch'" v-model="addForm[item.prop]"></el-switch>
<el-select
v-if="item.type === 'Select'"
v-model="addForm[item.prop]"
@change="item.change(addForm[item.prop])"
@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-upload
v-if="item.type === 'Upload'"
v-model="addForm[item.prop]"
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
>
<img v-if="item.imageUrl" :src="item.imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<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()"
>
<span>{{ item.label }}</span>
</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"
},
FormData: {
type: Array,
default: () => []
},
addForm: {
type: Object,
default: () => {}
},
searchHandle: {
type: Array,
default: () => []
}
},
computed: {
/** 解析表单的正则验证***/
rules() {
let rules = this.FormData.reduce((map, i) => {
if (i.rules) {
map[i.prop] = i.rules;
}
return map;
}, {});
return rules;
}
},
// mounted() {},
methods: {
// 验证表单
sublime() {
// 父组件的点击事件
this.$refs["FormData"].validate(valid => {
if (valid) {
this.$emit("sublime", valid);
} else {
return false;
}
});
},
// 重置表单
reset() {
this.$refs["FormData"].resetFields();
}
}
};
</script>
