element循环渲染el-select控制选择后改变disabled状态

最新推荐文章于 2024-07-15 14:53:54 发布

小居米

最新推荐文章于 2024-07-15 14:53:54 发布

阅读量960

点赞数

分类专栏： element css JavaScript 文章标签： javascript elementui

本文链接：https://blog.csdn.net/xiaojuju0/article/details/129825775

版权

JavaScript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

element

6 篇文章 1 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <div class="dashboard-container" v-for="select in dataSelect">
      <el-select v-model="select.value" @change="change(select.value)" clearable placeholder="请选择1">
        <el-option v-for="item in options" :key="item.value" :disabled="item.disabled" :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

export default {
  name: 'Dashboard',
  data() {
    return {
      dataSelect: [
        { value: "" },
        { value: "" },
        { value: "" },
        { value: "" },
        { value: "" },
        { value: "" },
      ],
      options: [{
        value: '1',
        disabled: false,
        label: '黄金糕'
      }, {
        value: '2',
        disabled: false,
        label: '双皮奶'
      }, {
        value: '3',
        disabled: false,
        label: '蚵仔煎'
      }, {
        value: '4',
        disabled: false,
        label: '龙须面'
      }, {
        value: '5',
        disabled: false,
        label: '北京烤鸭'
      }],
    }
  },
  methods: {
    change(e) {
        var idx = -1;
        this.options.forEach((element, index) => {
          this.dataSelect.forEach(item => {
            if (item.value == element.value) {
              element.disabled = true;
              idx = index
            }
          })
          if (idx != index) {
            element.disabled = false;
          } 
        });
    }
  }
}