欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-08 17:13:13
...

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”