多个el-select下拉框互斥选择

最新推荐文章于 2024-03-05 16:27:16 发布

VivreT

最新推荐文章于 2024-03-05 16:27:16 发布

阅读量1k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/baidu_38492843/article/details/125160145

版权

该博客探讨了Vue.js中的组件交互，展示了如何使用`<el-select>`组件创建多选下拉框，并通过`v-model`和`:disabled`属性进行数据绑定和状态管理。在`changeSelect`方法中，实现了当一个选项被选中时，其他选项自动设为不可选，同时更新form对象的状态。示例中涉及的数据结构和事件监听展示了Vue中动态数据响应和组件间通信的基本原理。

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

HTML：
<el-select
          v-model="valueA"
          placeholder="选项1"
          @change="changeSelect"
      >
        <el-option
            v-for="item of selectData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
        />
      </el-select>

      <el-select
          v-model="valueB"
          placeholder="选项2"
          @change="changeSelect"
      >
        <el-option
            v-for="item of selectData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
        />
      </el-select>
      <el-select
          v-model="valueC"
          placeholder="选项2"
          @change="changeSelect"
      >
        <el-option
            v-for="item of selectData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
        />
      </el-select>

data() {
    return {
      valueA: '',
      valueB: '',
      valueC: '',
      form:{
        valueA: '',
        valueB: '',
        valueC: '',
      },
      selectData: [{
        value: '选项1',
        label: '黄金糕',
        disabled:false
      }, {
        value: '选项2',
        label: '双皮奶',
        disabled:false
      }, {
        value: '选项3',
        label: '蚵仔煎',
        disabled:false
      }, {
        value: '选项4',
        label: '龙须面',
        disabled:false
      }, {
        value: '选项5',
        label: '北京烤鸭',
        disabled:false
      }],
    }
  },
methods:{
    changeSelect (val) {
      // 先把selectData恢复默认值，即所有的选项都是可选
      this.selectData.forEach(item => {
        item.disabled = false
      })
      // 判断form对象中，哪个属性发⽣了变化
      // 将选中值val直接赋值给发⽣变化的值，更新form对象
      if (this.form.valueA !== this.valueA) {
        this.form.valueA = val
      } else if (this.form.valueB !== this.valueB) {
        this.form.valueB = val
      } else if (this.form.valueC !== this.valueC) {
        this.form.valueC = val
      }
      // 对form对象遍历，form中有哪⼀项，就把selectData中该项的disabled属性变为true，禁⽤
      for (var key in this.form) {
        this.selectData.forEach(item => {
          if (this.form[key] === item.value) {
            item.disabled = true
          }
        })
      }
      this.valueA = this.form.valueA
      this.valueB = this.form.valueB
      this.valueC = this.form.valueC
    },
},