批量添加时,两个选择框为一组,不能选择一模一样的值,将不符合条件的值禁止设为禁止点击

效果展示:

 

完整代码如下:

<template>
  <div class="container">
      <div v-for="item in arr">
        <el-select v-model="item.name" placeholder="请选择" @change="changeBox">
            <el-option
              v-for="v in item.options"
              :key="v.value"
              :label="v.label"
              :value="v.value"
              :disabled="!getName(item, v)"
            >
            </el-option>
        </el-select>
        <el-select v-model="item.value" placeholder="请选择" @change="changeBoxa">
            <el-option
                v-for="v in item.bb"
                :key="v.value"
                :label="v.label"
                :value="v.value"
                :disabled="!getShow(item, v)"
            >
            </el-option>
        </el-select>
      </div>
  </div>
</template>
<script>
export default{
    data(){
        return {
            obj:{
            
            },
            obj1:{},
            arr:
            [
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            {
                name: "",
                value: '',
                options:[
                {
                    label: 'err',
                    value: 'errsss',
                },
                {
                    label:'dd',
                    value:'ddsss',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ],
                bb:[
                {
                    label: 'err',
                    value: 'err',
                },
                {
                    label:'dd',
                    value:'dd',
                },
                {
                    label:'严重',
                    value:'serious',
                },
                ]
            },
            ]
        }
    },
  methods:{
    changeBox(){
      this.obj = this.filterType(this.arr);
    },
    changeBoxa(){
      this.obj1 = this.filterType1(this.arr);
    },
    filterType(arr){
          let newData = {}
          arr.forEach((e, i) => {
          if (Object.keys(newData).indexOf('' + e.name) === -1) {
              newData[e.name] = []
          }
              //对应插入属性值
              newData[e.name].push(e)
          })
          return newData
        },

        filterType1(arr){
          let newData = {}
          arr.forEach((e, i) => {
          if (Object.keys(newData).indexOf('' + e.value) === -1) {
              newData[e.value] = []
          }
              //对应插入属性值
              newData[e.value].push(e)
          })
          return newData
        },
      getShow(item, v){
        console.log('obj', this.obj);
        if(!item.name){
          return true
        } else {
          return item.value === v.value || !this.obj[item.name].find(t=>t.value == v.value)
        }
      },

      getName(item, v){
        console.log('obj', this.obj);
        if(!item.value){
          return true
        } else {
          return item.name === v.value || !this.obj1[item.value].find(t=>t.name == v.value)
        }
      },
    getDisabled(item, v){
      if(!item.name){
        return false
      } else {
        return !(item.value === v.value || !this.arr.find(t=>t.value== v.value))
      }
      
    }
    
  }
}
</script>

最近更新

  1. TCP协议是安全的吗?

    2024-03-26 11:44:09       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-26 11:44:09       20 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-26 11:44:09       20 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-26 11:44:09       20 阅读

热门阅读

  1. vue的生命周期

    2024-03-26 11:44:09       20 阅读
  2. 004 包装类

    2024-03-26 11:44:09       20 阅读
  3. Vue 3.0 中一些主要的生命周期钩子

    2024-03-26 11:44:09       19 阅读
  4. instanceof的原理是什么?手写instanceof方法

    2024-03-26 11:44:09       19 阅读
  5. vue3 +ts 动态绑定 响应式数组

    2024-03-26 11:44:09       22 阅读
  6. Spring和Spring Boot之间的区别

    2024-03-26 11:44:09       22 阅读
  7. 机器学习导论:概念、分类与应用场景

    2024-03-26 11:44:09       25 阅读
  8. nowcoder运维面试题集锦

    2024-03-26 11:44:09       22 阅读
  9. [Vue3] 嵌套路由

    2024-03-26 11:44:09       19 阅读
  10. MySQL 索引底层数据结构

    2024-03-26 11:44:09       22 阅读