学无先后,达者为师

网站首页 编程语言 正文

element表格循环校验,确保数据不重复

作者:shang__前端 更新时间: 2022-07-12 编程语言

在这里插入图片描述

看上图

可以有多条数据,如果数据重复,就提示用户,【您的数据重复了】,要用到elementUi的自定义校验
在这里插入图片描述

<div v-for='(demoItem,index) in formLabelAlign.selectRetainedList' :key='index'>
  <div class="retained_content">
   <el-form-item style="width:40%" :prop="'selectRetainedList.'+ index+ '.retainedType'"  :rules="rules.retained">
    <el-select v-model="demoItem.retainedType" multiple collapse-tags filterable placeholder="请选择留存种类">
      <el-option
        v-for="item in optionss"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    </el-form-item>
    <el-form-item style="width: 50%" :prop="`selectRetainedList.${index}.retainedAccountId`" :rules="rules.retainedType">
     <el-select
          v-model="demoItem.retainedAccountId"
          placeholder="请选择投放账号"
          multiple
          collapse-tags
          filterable>
          <el-option
            v-for="item in retainedAccount"
            :key="item.value"
            :label="item.accounid"
            :value="item.value">
          </el-option>
      </el-select>
   </el-form-item>
  </div>
</div>

重点:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

自定义校验规则的写法

const checkoutType = ((rule, value, callback)=>{
  if (value.length === 0) {
    callback(new Error('请选择投放账号'))
  } else {
    this.$refs.formLabelAlign.clearValidate()
    let arrList = this.formLabelAlign.selectRetainedList
    let arr =  []
    for (let j = 0; j < arrList.length; j++) {
      const element = arrList[j];arr.push(element.retainedType.concat(element.retainedAccountId))
        }
   let reArr = [];
   let NewList = []
   for(let i = 0;i<arr.length;i++){
   if(reArr.indexOf(JSON.stringify(arr[i])) === -1){
     reArr.push(JSON.stringify(arr[i]))
     NewList.push(arr[i])
   }
 }
   if(arrList.length == NewList.length){
     callback()
   }else{
     callback(new Error('投放账号重复'))
   }
 }
})

在这里插入图片描述
大概就是这样就可以完成了

原文链接:https://blog.csdn.net/qq_49277509/article/details/125717414

栏目分类
最近更新