element可编辑表格验证失效问题

elemnet官网实例

动态增减表单项

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button @click="addDomain">新增域名</el-button>
  </el-form-item>
</el-form>

<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }]
        }
      };
    },
    methods: {
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script>

绑定方式为利用index动态进行绑定:prop="‘domains.’ + index + ‘.value’"

同理，可以利用index对表格内表单进行沿验证绑定

<el-form :model="ruleForm" ref="ruleForm">
            <el-button class='newlyAdded' size="small"  @click="planAdd" v-if="mode!=='see'" type="primary" style="margin-bottom:10px;">新增节点</el-button>
            <el-table class="tableSpecialForm"  :data="ruleForm.buildPlan" border style="width: 100%;margin:20px 0;">
                <el-table-column label="计划节点">
                    <template slot-scope="scope">
                        <el-form-item :key="scope.row.key" :prop="'buildPlan.'+ scope.$index + '.planNode'" :rules="planRules.planNode">
                            <el-input :disabled="mode==='see'||scope.$index=='0'||scope.$index=='1'||scope.$index=='2'"  v-model="scope.row.planNode" placeholder="请输入" class="nm-input">
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="计划完成时间" width="250">
                    <template slot-scope="scope">
                        <el-form-item :key="scope.row.key" :prop="'buildPlan.'+ scope.$index + '.planComptime'"  :rules="planRules.planComptime">
                            <el-date-picker v-model="scope.row.planComptime" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" type="date" placeholder="选择时间"  :disabled="mode==='see'" class="nm-input">
                            </el-date-picker>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="计划支付比例（100%）">
                    <template slot-scope="scope">
                        <el-form-item :key="scope.row.key" :prop="'buildPlan.'+ scope.$index + '.planPayment'"  :rules="planRules.planPayment">
                            <el-input :disabled="mode==='see'" v-model="scope.row.planPayment" placeholder="请输入">
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="备注">
                    <template slot-scope="scope">
                        <el-form-item :key="scope.row.key" :prop="'buildPlan.'+ scope.$index + '.planRemarks'"  :rules="planRules.planRemarks ">
                            <el-input :disabled="mode==='see'" :rows="2" type="textarea" v-model="scope.row.planRemarks" placeholder="请输入">
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="" align="center" width="70" v-if="mode!=='see'">
                    <template slot-scope="scope">
                        <el-button v-if="scope.$index!='0'&&scope.$index!='1'&&scope.$index!='2'" type="info" icon="el-icon-minus" size="mini"  @click="removeTableList(scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>

利用:prop="‘buildPlan.’+ scope.$index + ‘.planComptime’"进行绑定

也可以用es6语法中的` ,可以在字符串中进行数据的换算，并能通过${ }来获取参数 ，类似

`resource.${scope.$index}.provideOrg`

重点：绑定后对表格进行操作，发现会出现，删除第二行，第三行表格行会直接继承第二行验证结果，且不能改变验证结果
原因是没有加key
这与vue的机制有很大关系，当然包括react也都是这么处理的，key是一个非常重要的属性
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
在之后的添加表格中key为Date.now(),保证key值不重复

  this.projectform.budgetEstimate5.push( {costName:'',calculateBasis:'',calculateMethod:'',totalPrice:0,remarks:'',key:Date.now()})

然后在table中每个表单项中绑定key，:key=“scope.row.key”