解决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-form
            ref="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-item
                        label="姓名："
                        :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-item
                        label="电话："
                      >
                        <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-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="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{
	//提示必填信息
	}
})

效果图

转载请注明出处，谢谢