前言：由于项目中多处需要使用表单，为了提高代码复用性，需要做一些简单的封装，这里使用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:"",
},
