需求：el-form裏面el-form-item的數據基本可以重複，可以遍歷生成，el-form-item裏面有下拉和input，選擇某個下拉出現input，某個下拉隱藏input，如下圖：
思路：動態生成el-form-item，並在el-form-item綁定校驗規則
<el-form ref="stockForm" :model="stockForm" class="zd-el-form" size="mini" inline label-width="160px" > <div v-for="(item, index) in formItemList" :key="index" class="el-form-item-box" > <el-form-item :label="item.label+':'" :prop="item.status" :rules="rulesItemStatus" > <el-select v-model="stockForm[item.status]" class="item-placeholder" placeholder="請選擇" clearable @change="val => setParamStatusListChange(val, index)" // 回調函數可以帶多些需要的參數 > <el-option v-for="ite in setParamStatusList" :key="ite.value" :label="ite.name" :value="ite.value" /> </el-select> </el-form-item> <el-form-item v-if="stockForm[item.status] ==='2' || stockForm[item.status] ==='1'" :prop="item.value" :rules="rulesItemValue" > <el-input v-model="stockForm[item.value]" type="text" min="0" maxlength="10" clearable onkeydown.native="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" // 只能輸入數字正則校驗 /> </el-form-item> <el-tooltip class="item" effect="light" placement="top" > <div slot="content">{{ item.tooltip }}</div> <i style="color: #D9D9D9;padding-top: 18px;" class="el-icon-question" /> </el-tooltip> </div> </el-form>
校驗寫在data的return裏面：
rulesItemStatus: [
{
validator: (rule, value, callback) => {
let temp = 1
let statusArr = []
for (let i in this.attrStatusArr) {
if (i !== rule.field && this.stockForm[i] === '') {
this.$refs.stockForm.clearValidate(i)
statusArr.push(i)
temp++
}
}
let arr = this.formItemList.filter(item => item.status === rule.field)
let label = arr[0].label
if (value === '' && temp === this.formItemList.length) {
callback(new Error(`請選擇${label}狀態`))
} else {
callback()
}
},
trigger: 'change'
}
],
rulesItemValue: [
{
required: true,
validator: (rule, value, callback) => {
let arr = this.formItemList.filter(item => item.value === rule.field)
let label = arr[0].label
if (this.stockForm[arr[0].status] === '2' && value === '') {
callback(new Error(`請輸入${label}值`))
} else {
callback()
}
},
trigger: ['blur', 'change']
}
]
formItemData是每個el-form-item信息的Object數組有label、name、status、value、tooltip
setParamStatusList是下拉的值
stockForm是綁定的表單
attrStatusArr是表單中所有下拉的值
formItemList: [
{
label: 'item1',
name: 'attr1',
status: 'attr1Status',
value: 'attr1Value',
tooltip: 'item1tooltio'
},
{
label: 'item2',
name: 'attr2',
status: 'attr2Status',
value: 'attr2Value',
tooltip: 'item2說明'
},
{
label: 'item3',
name: 'attr3',
status: 'attr3Status',
value: 'attr3Value',
tooltip: 'item3說明'
},
{
label: 'item4',
name: 'attr4',
status: 'attr4Status',
value: 'attr4Value',
tooltip: 'item4說明'
},
{
label: 'item5',
name: 'attr5',
status: 'attr5Status',
value: 'attr5Value',
tooltip: 'item5說明'
},
{
label: 'item6',
name: 'attr6',
status: 'attr6Status',
value: 'attr6Value',
tooltip: 'item6說明'
},
{
label: 'item7',
name: 'attr7',
status: 'attr7Status',
value: 'attr7Value',
tooltip: 'item7說明'
}
]
stockForm: { attr1Value: '', attr1Status: '', attr2Value: '', attr2Status: '', attr3Value: '', attr3Status: '', attr4Value: '', attr4Status: '', attr5Value: '', attr5Status: '', attr6Value: '', attr6Status: '', attr7Value: '', attr7Status: '' },
setParamStatusList: [
{
value: '1',
name: '系統默認'
},
{
value: '2',
name: '手工設置'
},
{
value: '0',
name: '關閉'
}
]
attrStatusArr: {
attr1Status: '',
attr2Status: '',
attr3Status: '',
attr4Status: '',
attr5Status: '',
attr6Status: '',
attr7Status: ''
}