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就不能选择这两项了;以此类推

<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代码:

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/493471.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据库-索引快速学

索引 当表中数据量庞大时&#xff0c;往往搜索一条数据就会耗费很长的时间等待 索引是帮助数据库高效获取数据的数据结构 create index 索引名 on 数据表名&#xff08;字段名&#xff09;;为该表下的某一字段创建索引&#xff0c;检索耗时会大大的减小 索引的优缺点 优点&…

linux下关闭swap文件系统

临时关闭&#xff08;马上生效&#xff09; 永久关闭&#xff08;重启计算机才能生效&#xff09; vim /etc/fstab

libVLC 动态视频壁纸

在 Windows 上&#xff0c;你可能需要使用 Windows API 来设置壁纸&#xff0c;而在 Linux 上&#xff0c;你可能需要使用某种桌面环境特有的方法。在 macOS 上&#xff0c;这一功能可能受到限制。 效果图如下所示&#xff1a; 以下是一个简单的示例&#xff0c;说明了如何在 …

MICS:流量分析

前言&#xff1a; 有时候得到的文件后缀为pcap、pcapng等流量包的题&#xff0c;则需要我们分析流量包找出flag。 一、无线流量数据爆破 打开wirshark分析&#xff0c;发现都是那种WLAN的包&#xff0c;则可以判断为无线密码加密。 命令&#xff1a;aircrack-ng <包文件>…

访问者模式(数据与行为解耦)

目录 前言 UML plantuml 类图 实战代码 SimpleFileVisitor FileVisitor 接口 删除指定文件夹 模板 IVisitor IVisitable Client 前言 一个类由成员变量和方法组成&#xff0c;成员变量即是类的数据结构&#xff0c;方法则是类的行为。 如果一个类的数据结构稳定&am…

微分几何:曲线基本理论

参数曲线基本理论 曲线的定义 假设有一个运动的质点&#xff0c;从0到T时刻&#xff0c;质点从A点运动到B点&#xff0c;质点运动的轨迹形成了一条曲线&#xff0c;我们可以将这条路径曲线看成是时间 t ∈ [ 0 , T ] t \in [0,T] t∈[0,T]到空间位置 R R R的映射。 映射的概念…

Flink SQL 基于Update流出现空值无法过滤问题

问题背景 问题描述 基于Flink-CDC &#xff0c;Flink SQL的实时计算作业在运行一段时间后&#xff0c;突然发现插入数据库的计算结果发生部分主键属性发生失败&#xff0c;导致后续计算结果无法插入&#xff0c; 超过失败次数失败的情况问题报错 Caused by: java.sql.BatchUp…

MySQL面试汇总(一)

MySQL 如何定位慢查询 如何优化慢查询 索引及其底层实现 索引是一个数据结构&#xff0c;可以帮助MySQL高效获取数据。 聚簇索引和非聚簇索引 覆盖索引 索引创建原则 联合索引

前端学习<二>CSS基础——04-CSS选择器:伪类

伪类&#xff08;伪类选择器&#xff09; 伪类&#xff1a;同一个标签&#xff0c;根据其不同的种状态&#xff0c;有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类&#xff0c;这一点很明确&#xff0c;就是属于box类。但是a属于什么类&#xff1f;…

前端js计算日期 实现倒计时效果

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>倒计时示例</title> <style> #countdown { font-size: 24px; } #countdown span { margin-right: 10p…

未来制造:机器人行业新质生产力提升策略

机器人行业新质生产力提升咨询方案 一、机器人行业目前发展现状及特点&#xff1a; 创新活跃、应用广泛、成长性强。 二、机器人企业发展新质生产力面临的痛点&#xff1a; 1、高端人才匮乏 2、核心技术受限 3、竞争日益国际化 4、成本控制挑战 5、用户体验提升需求 三…

Linux软件安装:源代码与Tarball

文章目录 Linux源码包的安装与升级什么是源代码、编译器与可执行文件什么是函数库什么是make与configure什么是Tarball的软件如何安装与升级软件 使用gcc进行编译的简单实例单一程序&#xff1a;打印 Hello World主、子程序链接&#xff1a;子程序的编译调用外部函数库&#xf…

三轴工作台激光焊接机:实现高精度、高效率焊接的新选择

三轴工作台激光焊接机是一种先进的焊接设备&#xff0c;结合了激光焊接技术与三轴工作台的运动控制&#xff0c;实现了焊接过程的高效、精准与自动化。这种设备主要利用激光束的高能量密度和高速度特性&#xff0c;使工件在熔化的同时快速冷却凝固&#xff0c;从而达到高质量的…

AXI Memory Mapped to PCI Express学习笔记(一)——PCIe事务

1 PCIe事务 AXI事务对于PCIe来说&#xff0c;主要涉及到在AXI总线和PCIe总线之间进行数据交换和通信的过程。在PCIe系统中&#xff0c;AXI总线作为一个连接不同组件的桥梁&#xff0c;可以实现高效的数据传输和事务处理。 AXI事务通常包括读事务和写事务。在读事务中&#xf…

Git的使用记录+坑的处理

上学期也使用过git拉取gitee的项目进行远程办公,但是因为那个项目太赶,所以没有记录是如何使用的. 现在这个项目需要拉取gitlab上面的资源,于是再次使用了git,就记录一下基本操作和一些问题. 1.基本命令 git clone <repository-url> [<repository-url>代表远程仓库…

Java中锁的分类

引言 在多线程并发编程场景中,锁作为一种至关重要的同步工具,承担着协调多个线程对共享资源访问秩序的任务。其核心作用在于确保在特定时间段内,仅有一个线程能够对资源进行访问或修改操作,从而有效地保护数据的完整性和一致性。锁作为一种底层的安全构件,有力地防止了竞…

Qt开发(2)——在已有VS项目中配置Qt

在之前的Qt开发学习中&#xff0c;基本都是在Qt Creator中创建一个Qt项目&#xff0c;或者即便是在VS中也是直接新建一个Qt项目。但很少有记录如何在已有的C项目中添加Qt,这就好比我有个项目已经开发完了&#xff0c;现在又说加个Qt界面的功能。这篇文章就是记录如何在已有项目…

Programming Abstractions in C阅读笔记:p338-p346

《Programming Abstractions in C》学习第80天&#xff0c;p338-p346&#xff0c;总计9页。 一、技术总结 栈的实现包括入栈、出栈、判断栈是否为满&#xff0c;判断栈是否为空等。作者结合RPN计算器来实现&#xff0c;稍显无聊。 /** File: rpncalc.c* ---------------* Th…

VMware和Xshell连接

1.开启虚拟机 2.使用管理员账户&#xff0c;点击未列出 3.输入用户名密码 4.点击编辑虚拟网络编辑器 5.记住自己的网关和IP地址 6.打开终端 7.输入命令&#xff0c;vim / etc / sysconfig / network -scripts / ifcfg-ens33 回车 8.修改图中两处按“ I ”键进入编辑 d…

号码采集协议讲解

仅供学习研究交流使用 需要的进去拿源码或者成品