前言：由于項(xiàng)目中多處需要使用表單，為了提高代碼復(fù)用性氧秘，需要做一些簡(jiǎn)單的封裝年鸳，這里使用vue+elmentUI
預(yù)覽圖：
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="'請(qǐng)輸入' + item.label"
v-model="formData[item.model]"
>
</el-input>
<el-select
v-if="item.type === 'select'"
:placeholder="'請(qǐng)選擇' + 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="'請(qǐng)選擇' + 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. 監(jiān)聽
watch: {
form: {
immediate: true,
// 將porp中內(nèi)容同步到data里
handler(news) {
this.formData = news;
},
},
},
4. 配置數(shù)據(jù)
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:"",
},
