elementUI两个select单选框联动
实现需求:两个单选框内容两栋,在选择第一个时,第二个选框能自动更新对应选项。且在切换第一个选项内容时,第二个选框会被清空且切换到新的对应选项。

设置值班班次和备班情况两个选项 ,完整代码如下:
<template><div class="content-box"><div class="container"><el-select v-model="leftValue" placeholder="请选择" @change="handleLeftChange"><!-- <el-option v-if="leftOptions.length !== 0" label="全选" value="all"></el-option> --><el-option v-for="item in leftOptions" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select><el-selectstyle="margin-left: 20px"@change="handleRightChange"v-model="rightValue"disabledplaceholder="请选择"><el-optionv-for="item in leftOptions":key="item.value":label="item.name":value="item.id":disabled="rightDisabledOptions.includes(item.value)"></el-option></el-select></div></div>
</template><script>
export default {data() {return {leftValue: [],rightValue: [],leftOptions: [{ value: '1', label: '白班', name: '否', id: 1 },{ value: '2', label: '夜班', name: '否', id: 2 },{ value: '3', label: '备班', name: '是', id: 3 },{ value: '4', label: '全班', name: '否', id: 4 },{ value: '5', label: '休班', name: '否', id: 5}],rightDisabledOptions: [],selectData: [],updSelect: [] //为了不影响原始数据,不然原始数据勾选几次值全改变了};},mounted() {},methods: {handleLeftChange(value) {// 清空右边下拉框的选中值和禁用选项this.rightValue = [];this.rightDisabledOptions = [];this.selectData = [];// 根据左边下拉框的选中值更新右边下拉框的选中值和禁用选项// 左右结构一定要有一样的值,不然联动不了// 如果是全选,就让所有的select被选中if (value.includes('all')) {this.leftValue = this.leftOptions.map((option) => option.value);this.rightValue = this.leftOptions.map((option) => option.name);this.selectData = this.leftOptions;} else {this.leftOptions.forEach((option) => {// 如果左侧选中的包含右侧的value值if (this.leftValue.includes(option.value)) {this.rightValue.push(option.name);// 把option.id改为option.name,显示出来的才是是否this.selectData.push(option);} else {this.rightDisabledOptions.push(option.value);}});}this.updSelect = JSON.parse(JSON.stringify(this.selectData));},// 右侧选择handleRightChange(value) {//将selectData值深拷贝给UpdSelectthis.updSelect = JSON.parse(JSON.stringify(this.selectData));this.updSelect.forEach((item) => {if (!value.includes(item.id)) {item.id = -1;item.name = '';}});console.log(this.updSelect, '解决');}}
};
</script><style lang="scss" scoped></style>
由于第二个选框是和第一选框值同步的,第一个框有五个值,第二个框就也要五个选项,即使是重复的值。为了看起来没那么杂乱,我就把第二个选框禁用了(反正值能自己更新)
学习参考来源:俩个el-select的联动选择_el-select 联动-CSDN博客
相关文章:
elementUI两个select单选框联动
实现需求:两个单选框内容两栋,在选择第一个时,第二个选框能自动更新对应选项。且在切换第一个选项内容时,第二个选框会被清空且切换到新的对应选项。 设置值班班次和备班情况两个选项 ,完整代码如下: <…...
十四、GPT
在GPT-1之前,传统的 NLP 模型往往使用大量的数据对有监督的模型进行任务相关的模型训练,但是这种有监督学习的任务存在两个缺点:预训练语言模型之GPT 需要大量的标注数据,高质量的标注数据往往很难获得,因为在很多任务…...
五款优秀的FTP工具
一、WinSCP WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端。同时支持SCP协议。它的主要功能就是在本地与远程计算机间安全的复制文件。.winscp也可以链接其他系统,比如linux系统。 官网:https://winscp.net/ 二、FileZilla FileZilla是一个免费开源的…...
十八、软考-系统架构设计师笔记-真题解析-2022年真题
软考-系统架构设计师-2022年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.云计算服务体系结构如下图所示,图中①、②、③分别与SaaS、PaaS、IaaS相对应,图中①、②、③应为( )。 A.应用层、基础设施层、平台层 B.应用层、平台层、基础设施层 C.平…...
oracle数据库名、实例名、服务名等区分
DB_NAME: ①是数据库名,长度不能超过8个字符,记录在datafile、redolog和control file中 ②在DataGuard环境中DB_NAME相同而DB_UNIQUE_NAME不同 ③在RAC环境中,各个节点的DB_NAME 都相同,但是INSTANCE_NAME不同 ④DB_NA…...
MQ横向对比:RocketMQ、Kafka、RabbitMQ、ActiveMQ、ZeroMQ
前言 本文将从多个角度全方位对比目前比较常用的几个MQ: RocketMQKafkaRabbitMQActiveMQZeroMQ将单独说明。 表格对比 特性RocketMQKafkaRabbitMQActiveMQ单机吞吐量10 万级,支撑高吞吐10 几万级,吞吐量非常高,甚至有文献称&a…...
html5cssjs代码 018颜色表
html5&css&js代码 018颜色表 一、代码二、效果三、解释 这段代码展示了一个基本的颜色表,方便参考使用,同时也应用了各种样式应用方式。 一、代码 <!DOCTYPE html> <html lang"zh-cn"> <head><title>编程笔记…...
力扣刷题Days20-151. 反转字符串中的单词(js)
目录 1,题目 2,代码 1,利用js函数 2,双指针 3,双指针加队列 3,学习与总结 1,正则表达式 / \s /: 2,结合使用 split 和正则表达式: 1,题目 给你一个字符串 s &am…...
基于grafana+elk等开源组件的 云服务监控大屏架构
本套大屏,在某云服务大规模测试环境,良好运行3年. 本文主要展示这套监控大屏的逻辑架构.不做具体操作与配置的解释. 监控主要分为三部分: 数据展示部分数据存储数据采集 1. 数据展示 数据展示方面主要使用grafana 2. 数据存储 根据数据种类和特性和用途的不同,本套监控采用…...
PWM驱动舵机
PWM驱动舵机 接线图 程序结构图: pwm.c部分代码 #include "stm32f10x.h" // Device headervoid PWM_Init(void){// 开启时钟,这里TIM2是通用寄存器RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIM2,ENABLE);// GPIO初始化代…...
处理Centos 7 中buff/cache高的问题
在CentOS 7中,如果发现 buff/cache 栏目的值过高占用了大量内存,可以尝试以下方法来释放部分缓存: 清理页面缓存 Linux内核会缓存最近使用过的内存页面,以提高访问速度。你可以使用以下命令清理页面缓存: sudo sync && sudo echo 1 > /proc/sys/vm/drop_caches …...
【送书福利第五期】:ARM汇编与逆向工程
文章目录 📑前言一、ARM汇编与逆向工程1.1 书封面1.2 内容概括1.3 目录 二、作者简介三、译者介绍🌤️、粉丝福利 📑前言 与传统的CISC(Complex Instruction Set Computer,复杂指令集计算机)架构相比&#…...
STM32的USART能否支持9位数据格式话题
1、问题描述 STM32L051 这款单片机。平常的 USART 串口传输是 8 位数据,但是他的项目需要用串口传输 9 位数据。当设置为 8 位数据时,串口响应中断正常。但是,当设置为 9 位数据时,串口就不产生中断了。USART2 的 ISR 寄存器 RXN…...
OLAP与数据仓库和数据湖
OLAP与数据仓库和数据湖 本文阐述了OLAP、数据仓库和数据湖方面的基础知识以及相关论文。同时记录了我如何通过ChatGPT以及类似产品(通义千问、文心一言)来学习知识的。通过这个过程让我对于用AI科技提升学习和工作效率有了实践经验和切身感受。 预热 …...
zookeeper快速入门三:zookeeper的基本操作
在zookeeper的bin目录下,输入./zkServer.sh start和./zkCli.sh启动服务端和客户端,然后我们就可以进行zookeeper的基本操作了。如果是windows,请参考前面章节zookeeper快速入门一:zookeeper安装与启动 目录 一、节点的增删改查 …...
oracle 19c打补丁到19.14
oracle 19c打补丁到19.14 oracle 19.3打补丁到19.14 查看oracle的版本: SQL> column product format A30 SQL> column version format A15 SQL> column version_full format A20 SQL> column status format A15 SQL> select * from product_compo…...
Spring Boot(六十九):利用Alibaba Druid对数据库密码进行加密
1 Alibaba Druid简介 之前介绍过Alibaba Druid的,章节如下,这里就不介绍了: Spring Boot(六十六):集成Alibaba Druid 连接池 这章使用Alibaba Druid进行数据库密码加密,在上面的代码上进行修改,这章只介绍密码加密的步骤。 目前越来越严的安全等级要求,我们在做产品…...
51单片机—DS18B20温度传感器
目录 一.元件介绍及原理 二,应用:DS18B20读取温度 一.元件介绍及原理 1.元件 2.内部介绍 本次元件使用的是单总线 以下为单总线的介绍 时序结构 操作流程 本次需要使用的是SKIP ROM 跳过, CONVERT T温度变化,READ SCRATCHPAD…...
Monorepo 解决方案 — 基于 Bazel 的 Xcode 性能优化实践
背景介绍 书接上回《Monorepo 解决方案 — Bazel 在头条 iOS 的实践》,在头条工程切换至 Bazel 构建系统后,为了支持用户使用 Xcode 开发的习惯,我们使用了开源项目 Tulsi 作为生成工具,用于将 Bazel 工程转换为 Xcode 工程。但是…...
Unity触发器的使用
1.首先建立两个静态精灵(并给其中一个物体添加"jj"标签) 2.添加触发器 3.给其中一个物体添加刚体组件(如果这里是静态的碰撞的时候将不会触发效果,如果另一个物体有刚体可以将它移除,或者将它的刚体属性设置…...
【花雕学编程】Arduino BLDC 之使用互补滤波进行姿态控制的机器人
从专业工程视角来看,基于Arduino、使用互补滤波进行姿态控制的BLDC(无刷直流电机)机器人,是一个典型的嵌入式实时闭环控制系统。它集成了传感器数据融合、控制算法和电机驱动,广泛应用于对姿态稳定性有要求的场景。 1、…...
操作系统-lazy allocation
只有真正需要使用这些页的时候,才进行物理内存页的实际分配sbrk()在xv6操作系统中,进程的用户内存布局由代码段(text)、数据段(data)、堆区(heap)和栈区(stack)组成。sbrk()主要修改的是堆区的大小,堆在xv6中由低地址向高地址拓展。当程序调用sbrk(n)时,操作系统内核…...
YOLOv5后处理升级指南:一文搞懂NMS、Soft-NMS和CIoU-NMS怎么选
YOLOv5后处理优化实战:NMS算法选型与性能调优指南 当你的YOLOv5模型完成训练后,最后一个关键环节是后处理优化——这直接决定了检测框的质量和最终性能表现。面对琳琅满目的NMS变种和IoU计算方法,工程师们常常陷入选择困难:Soft-N…...
从零开始理解L1和L2正则化:机器学习中的惩罚函数详解
从零开始理解L1和L2正则化:机器学习中的惩罚函数详解 在构建机器学习模型时,我们常常面临一个核心矛盾:模型越复杂,对训练数据的拟合效果越好,但同时也更容易陷入过拟合的泥潭。想象一下,你正在教一个学生解…...
手把手教你用Python处理脑电信号:从MRCP到SMR的实战指南
手把手教你用Python处理脑电信号:从MRCP到SMR的实战指南 脑电信号处理一直是神经科学和脑机接口领域的热门研究方向。对于开发者而言,掌握Python处理脑电信号的技能不仅能提升科研效率,还能为医疗辅助设备开发打下坚实基础。本文将带你从零开…...
BinCmdParser:嵌入式二进制命令动态解析器
1. BinCmdParser:面向嵌入式通信的动态二进制命令解析器 在工业控制、传感器网络与跨平台设备互联场景中,串口/UART/SPI/I2C等低带宽物理通道常承载结构化二进制指令。传统固定帧格式(如Modbus RTU、自定义8字节头4字节长度2字节CRCÿ…...
分布式存储的监控与告警:从理论到实践
分布式存储的监控与告警:从理论到实践 引言 作为一名在数据深渊里捞了十几年 Bug 的女码农,我见过太多因为监控不到位导致的生产事故。在分布式存储系统中,监控与告警是确保系统稳定运行的关键因素之一。今天,我们来聊聊分布式存储…...
提升90% UI开发效率:psd2fgui工具从设计到实现的全流程指南
提升90% UI开发效率:psd2fgui工具从设计到实现的全流程指南 【免费下载链接】psd2fgui A tool for converting psd file to fairygui package. 项目地址: https://gitcode.com/gh_mirrors/ps/psd2fgui 一、核心价值:为什么选择psd2fgui࿱…...
单片机开源项目精选:从按键处理到物联网平台
1. 单片机开源项目精选:从按键处理到物联网平台 在嵌入式开发领域,GitHub上有大量高质量的开源项目可以加速我们的开发进程。这些项目往往由一线工程师开发维护,经过实际项目验证,比商业库更贴近开发者真实需求。今天我将分享几个…...
[特殊字符] 即梦AI(Dreamina)完全指南:字节跳动的AI创作神器有多强?
即梦AI(Dreamina)是字节跳动旗下剪映团队推出的一站式AI创作平台,自2024年5月正式上线以来,凭借强大的中文理解能力、丰富的创作功能和极具竞争力的价格策略,迅速成为国内AI创作领域的头部产品。本文将全面解析即梦AI的…...
