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>
相关推荐
群联云防护小杜8 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台26 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹33 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构