el-select动态禁用

在一个el-form表单中有5个el-form-item;

每个el-form-item是一个el-select控件;

这5个el-select控件遵循这样的规则,都是使用同一个list集合,如果第一个el-select选择了list中的某一项,那么这一项就被禁用;其他的el-selet就不能选择这一项了;

如果第二个el-select选择了list中的某一项,那么这一项和第一个el-select选择的项都禁用,

其他的el-select就不能选择这两项了;以此类推

javascript 复制代码
<template>
  <div>
     <el-form :model='form' :rules="rules" ref="form">
      <el-form-item v-for="(select, index) in selects" :key="index" :label="'Select ' + (index + 1)"
                    prop="selectedOptions">
        <el-select v-model="form.selectedOptions[index]" @change="handleSelectChange(index)" @clear="handleSelectClear(index)" clearable>
          <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" :disabled="isOptionDisabled(option.value)"></el-option>
        </el-select>
      </el-form-item>
        <!-- <el-button type="primary" @click="submitForm">Submit</el-button> -->
    </el-form>
  </div>
</template>

Js代码:

javascript 复制代码
<script>
export default {
  data() {
    return {
      options: [
        { label: 'Option 1', value: 1 },
        { label: 'Option 2', value: 2 },
        { label: 'Option 3', value: 3 },
        { label: 'Option 4', value: 4 },
        { label: 'Option 5', value: 5 }
      ],
      form:{
         selectedOptions: [null, null, null, null, null],
         disabledOptions: [], // 禁用的选项集合
      },
      rules: {
        selectedOptions: [
          { required: true, message: 'Please select at least one option', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    selects() {
      return Array.from({ length: 5 });
    }
  },
  methods: {
    // 下拉框选择事件
    handleSelectChange(index) {
      this.form.disabledOptions = [];
      console.log(this.form.selectedOptions,'+++++++ ')
      for (let i = 0; i < this.form.selectedOptions.length; i++) {
        if (this.form.selectedOptions[i] !== null) {
          this.form.disabledOptions.push(this.form.selectedOptions[i]);
        }
      }
    },
    // 下拉框清除事件
    handleSelectClear(index) {
      const clearedValue = this.form.selectedOptions[index];
      const indexToRemove = this.form.disabledOptions.indexOf(clearedValue);
      if (indexToRemove !== -1) {
        this.form.disabledOptions.splice(indexToRemove, 1);
      }
    },
    //是否禁用
    isOptionDisabled(value) {
      return this.form.disabledOptions.includes(value);
    }
  }
};
</script>
相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue