日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

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

欄目分類
最近更新