el-select 不能重复选择

F N Nancy

已于 2024-03-04 17:24:23 修改

阅读量788

点赞数 1

文章标签： javascript

于 2024-02-27 15:11:29 首次发布

本文链接：https://blog.csdn.net/NancyFyn/article/details/136322947

版权

文章介绍了如何在Vue项目中使用ElementUI的el-select组件，防止用户重复选择，并在删除选项后允许重新选择。通过v-model绑定和自定义方法控制选项的disable状态。

摘要由CSDN通过智能技术生成

el-select 不能重复选择，注意：删除后可以再次重新被选择
在这里插入图片描述

				<el-form-item>
                    <el-select v-model="attribute.attributeSelect" @change="changeSelect()" placeholder="请选择属性分组" clearable>
	                    <el-option
	                        v-for="item in attributeList"
	                        :key="item.value"
	                        :label="item.label"
	                        :value="item.value"
	                        :disabled="item.disabled"
	                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-button class="el-button" type="text" @click="delAttribute({attribute: attribute, index: attIndex})">
                  <svg-icon
                      class="svg-icon"
                      name="shanchu"
                      :width="16"
                      :height="16"
                      type="primary"
                  />
                </el-button>

// 数据定义
data() {
    return {
      attributeList: [
        {
          label: 'qwe',
          value: 'qwe'
        },{
          label: 'eee',
          value: 'eee'
        },{
          label: 'ddd',
          value: 'D'
        },
      ],
      // 属性分组
      attributeGroupForm: [
        //   单一
        {
          attributeSelect: '',
        }
      ],
    }
  },

	changeSelect() {
      this.setDisable()
    },
    // 选项处理
    setDisable(){
      this.attributeList.forEach(item=> {
        let isdisable = this.attributeGroupForm.findIndex((val) => val.attributeSelect ==item.value)
        if(isdisable!=-1){
          item.disabled = true
        }else {
          item.disabled = false
        }
      })
    },
    // 添加 分组
	attributeGroupIndex() {
        this.attributeGroupForm.push({
          attributeSelect: '',
        })
    },