添加多个select 禁用已选中的选项

最新推荐文章于 2024-06-04 16:48:10 发布

小么小二郎lxl

最新推荐文章于 2024-06-04 16:48:10 发布

阅读量459

点赞数

分类专栏： vue 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_37844543/article/details/124767929

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<div v-for="(item, index) in form.condition" :key="index">
<el-form-item>
<el-select v-model="item.column" placeholder="请选择字段">
<el-option v-for="item in filedOption" :key="item.value" :label="item.label" :value="item.value" disabled="getDisabled(item, index)" />
</el-select>
</el-form-item>
</div>

data(){
return {
 form: {
          condition: [
        {
          column: "",
          sign: "gt",
          value: '',
        },
      ],
      },
}
},
methods:{
 getDisabled(item,index) {
      const condition = cloneDeep(this.form.condition)
      condition.splice(index, 1) 
      const columns = condition.map(v => v.column).filter(Boolean) //已选中的字段
      // 用已选的去比较所有字段 包含就为true
      return columns.includes(item.value)
    },
}