el-form的el-form-item遍历生成,并且prop动态生成,校验
需求:el-form里面el-form-item的数据基本可以重复,可以遍历生成,el-form-item里面有下拉和input,选择某个下拉出现input,某个下拉隐藏input,如下图:
思路:动态生成el-form-item,并在el-form-item绑定校验规则
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" > item :label="item.label+':'" :prop="item.status" :rules="rulesItemStatus" > select v-model="stockForm[item.status]" class="item-placeholder" placeholder="请选择" clearable @change="val => setParamStatusListChange(val, index)" // 回调函数可以带多些需要的参数 > option v-for="ite in setParamStatusList" :key="ite.value" :label="ite.name" :value="ite.value" /> item v-if="stockForm[item.status] ==='2' || stockForm[item.status] ==='1'" :prop="item.value" :rules="rulesItemValue" > input v-model="stockForm[item.value]" type="text" min="0" maxlength="10" clearable onkeydown.native="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" // 只能输入数字正则校验 /> tooltip class="item" effect="light" placement="top" > {{ item.tooltip }}<i style="color: #D9D9D9;padding-top: 18px;" class="el-icon-question" />
校验写在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说明' } ]setParamStatusList: [ { value: '1', name: '系统默认' }, { value: '2', name: '手工设置' }, { value: '0', name: '关闭' } ]
stockForm: { attr1Value: '', attr1Status: '', attr2Value: '', attr2Status: '', attr3Value: '', attr3Status: '', attr4Value: '', attr4Status: '', attr5Value: '', attr5Status: '', attr6Value: '', attr6Status: '', attr7Value: '', attr7Status: '' },
attrStatusArr: {
attr1Status: '',
attr2Status: '',
attr3Status: '',
attr4Status: '',
attr5Status: '',
attr6Status: '',
attr7Status: ''
}