解决ElementUI el-table行内输入验证问题，动态增减行

通过el-from验证动态表格的行内输入

eltable动态增加行或者删除行只需要控制对应的数组就可以实现，行内的验证可以使用el-form的表单验 证，直接上代码：

el-form嵌套table

form验证，prop及rules的写法：

:prop=\"\'lxrList.\' + scope.$index + \'.xingMing\'\":rules=\"lxrListRules.xingMing\"

完整的el-form及el-table代码

// el-form 在最外层<el-formref=\"dataFormLXR\":rules=\"rules\":model=\"lxrTemp\"label-position=\"right\"label-width=\"80px\"><el-table :data=\"lxrTemp.lxrList\" show-header><el-table-column label=\"\" min-width=\"600\"><template slot-scope=\"scope\"><el-row><el-col :span=\"6\"><el-form-itemlabel=\"姓名：\":prop=\"\'lxrList.\' + scope.$index + \'.xingMing\'\":rules=\"lxrListRules.xingMing\"><el-input v-model=\"scope.row.xingMing\" placeholder=\"请填写姓名\" /></el-form-item></el-col><el-col :span=\"6\"><el-form-itemlabel=\"电话：\"><el-input v-model=\"scope.row.dianHua1\" placeholder=\"请填写电话\" /></el-form-item></el-col></el-row></template></el-table-column><el-table-column label width=\"50\" align=\"center\"><template slot-scope=\"scope\"><el-buttontype=\"danger\"icon=\"el-icon-delete\"circlesize=\"small\"@click=\"deleteRow(scope.row,scope.$index)\"//删除方法/></template></el-table-column></el-table><el-row><el-col :span=\"24\" align=\"right\" style=\"padding:10px\"><div class=\"el-table-add-row\"><el-button type=\"success\" icon=\"el-icon-plus\" circle size=\"small\" @click=\"addRow()\" /></div></el-col></el-row></el-form>

data设置：

elform验证需要传入对象，因此table的数组需要放到对象中

data() {return {lxrTemp: {lxrList: [{xingMing: \'\',dianHua1: \'\',zhiWu: \'\',xingBie: \'\'}]}},//联系人验证规则lxrListRules: {xingMing: [{ required: true, message: \'请输入姓名\', trigger: [\'blur\', \'change\'] }],xingBie: [{ required: true, message: \'请输入性别\', trigger: [\'blur\', \'change\'] }]},}

增加行

addRow() {const item = {xingMing: \'\',dianHua: \'\',zhiWu: \'\',}this.lxrTemp.lxrList.push(item)},

删除行

deleteRow(row, index) {this.lxrTemp.lxrList.splice(index, 1)},

保存时验证

self.$refs[\'dataFormLXR\'].validate(valid => {if(valid){//写保存的逻辑}else{//提示必填信息}})

效果图

转载请注明出处，谢谢