Cascader 级联选择器一级单选二级多选

news2024/12/27 8:27:29
  <el-form-item
                                                                label="开关配置"
                                                                :rules="[
                                                                    { required: false, 
                                                                    message: '开关配置', 
                                                                    trigger: 'blur' }]">
                                                                <el-cascader
                                                                    style="width: 300px"
                                                                    clearable
                                                                    collapse-tags
                                                                    filterable
                                                                    :props="{multiple: true}"
                                                                    v-model="cascaderValue"
                                                                    @change="cascaderHandleChange"
                                                                    :options="dsConfigOption"
                                                                    ref="cascader">
                                                                    <template slot-scope="{ node, data }">
                                                                        <span v-if="node.level !== 4">{{ node.label }}</span>
                                                                        <el-input
                                                                            v-else
                                                                            v-model="node.value"
                                                                            @input="handleInputChange(node, $event)"
                                                                            placeholder="请输入值"></el-input>
                                                                    </template>
                                                                </el-cascader>
                                                            </el-form-item>

dsConfigOption :

[{"value":1,"label":"enable_Replay_MachineLearningAI_TDM","children":[{"value":21,"label":"客户端与DS","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":22,"label":"仅DS","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":23,"label":"仅客户端","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":24,"label":"安全控制阀","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]}]},{"value":2,"label":"test","children":[{"value":21,"label":"客户端与DS","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":22,"label":"仅DS","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":23,"label":"仅客户端","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]},{"value":24,"label":"安全控制阀","children":[{"value":30,"label":"模式变量","children":[{"value":0,"label":"值"}]},{"value":31,"label":"控制台变量","children":[{"value":0,"label":"值"}]},{"value":32,"label":"更快下发到客户端的控制台变量","children":[{"value":0,"label":"值"}]},{"value":33,"label":"安全策略阈值","children":[{"value":0,"label":"值"}]}]}]}]

cascaderHandleChange

        cascaderHandleChange(e) {
            if (!e.length) return;

            const tempId = this.dsIds.tempId === 0 ? e[0][0] : this.dsIds.tempId;

            const sameArr = e.filter(item => item[0] === tempId);
            const unSameArr = e.filter(item => item[0] !== tempId);

            if (unSameArr.length) {
                this.dsIds.tempId = unSameArr[0][0];
                this.cascaderValue = unSameArr;
            } else {
                this.cascaderValue = sameArr;
            }
        },

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CentOS7下的vsftpd服务器和客户端

目录 1、安装vsftpd服务器和ftp客户端&#xff1b; 2、配置vsftpd服务器&#xff0c;允许普通用户登录、下载、上传文件&#xff1b; 3、配置vsftpd服务器&#xff0c;允许anonymous用户登录、下载、上传文件&#xff1b; 4、配置vsftpd服务器&#xff0c;允许root用户登录…

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——12使用YOLO-Bin

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——12使用YOLO-Bin ​ 根据前面内容&#xff0c;所有的子任务已经基本结束&#xff0c;接下来就是调用转化的bin模型进行最后的逻辑控制了 1 .YOLO的bin使用 ​ 对于yolo其实有个简单的办法&#xff0c;也…

109.【C语言】数据结构之求二叉树的高度

目录 1.知识回顾&#xff1a;高度&#xff08;也称深度&#xff09; 2.分析 设计代码框架 返回左右子树高度较大的那个的写法一:if语句 返回左右子树高度较大的那个的写法二:三目操作符 3.代码 4.反思 问题 出问题的代码 改进后的代码 执行结果 1.知识回顾&#xf…

STM32学习(一)

STM32是什么 STM32是意法半导体&#xff08;ST&#xff09;公司基于ARM Cortex-M内核开发的32位微控制器‌。他的名字是由&#xff1b;意大利SGS&法国Thomson共同研制的&#xff0c;中国人民取两家公司名称的首字母于是ST就是这样来的&#xff0c;M是单片机M-Micro Contro…

Windows、CentOS环境下搭建自己的版本管理资料库:GitBlit

可以搭建属于公司内部或者个人的Git服务器&#xff0c;方便程序代码及文档版本管理。 官网&#xff1a;http://www.gitblit.com/ Windows环境下安装 提前已经安装好了JDK。 官网下载Windows版的GitBlit。 将zip包解压到自己想要放置的文件夹下。 建立版本库路径&#xff0c…

音视频入门基础:MPEG2-TS专题(22)——FFmpeg源码中,获取TS流的音频信息的实现

一、引言 通过FFmpeg命令可以获取到TS文件/TS流的音频压缩编码格式、音频压缩编码格式的profile、音频采样率、通道数、音频码率信息&#xff1a; ./ffmpeg -i XXX.ts 本文以音频为AAC为例讲述FFmpeg到底是从哪个地方获取到这些音频信息的。 二、音频压缩编码格式 FFmpeg获取…

中伟视界:电话、短信怎么在矿山智能分析平台中的报警等级管理中分级通知到相关人员

在现代矿山安全管理中&#xff0c;通讯报警系统的有效性不可忽视&#xff0c;智慧矿山的融合通信与AI智能预警的联动&#xff0c;已经成为矿山智能化的一个发展方向。随着科技的发展&#xff0c;矿山智能分析平台越来越受到企业的青睐&#xff0c;通过对报警信息的分级管理&…

音视频入门知识(二)、图像篇

⭐二、图像篇 视频基本要素&#xff1a;宽、高、帧率、编码方式、码率、分辨率 ​ 其中码率的计算&#xff1a;码率(kbps)&#xff1d;文件大小(KB)&#xff0a;8&#xff0f;时间(秒)&#xff0c;即码率和视频文件大小成正比 YUV和RGB可相互转换 ★YUV&#xff08;原始数据&am…

论文研读:AnimateDiff—通过微调SD,用图片生成动画

1.概述 AnimateDiff 设计了3个模块来微调通用的文生图Stable Diffusion预训练模型, 以较低的消耗实现图片到动画生成。 论文名&#xff1a;AnimateDiff: Animate Your Personalized Text-to-Image Diffusion Models without Specific Tuning 三大模块&#xff1a; 视频域适应…

百度地图绘制行政区域及设置中心点

// 画行政区 const drwaDistrict (disList, clear true) > {clear && clearOverlays();if (!bMapGL.value) return;let bd new bMapGL.value.Boundary();disList.map((item) > {bd.get(item, function (rs1) {// rs1 是行政区对应的点集合 此处非每次必反信息…

jetson Orin nx + yolov8 TensorRT 加速量化 环境配置

参考【Jetson】Jetson Orin NX纯系统配置环境-CSDN博客 一 系统环境配置&#xff1a; 1.更换源&#xff1a; sudo vi /etc/apt/sources.list.d/nvidia-l4t-apt-source.list2.更新源&#xff1a; sudo apt upgradesudo apt updatesudo apt dist-upgrade sudo apt-get updat…

VirtualBox下ubuntu23.04使用主机串口以及使用 minicom 进行串口调试

VirtualBox下ubuntu23.04使用主机串口以及使用 minicom 进行串口调试 一、打开设备管理器看主机&#xff08;Window系统&#xff09;是否识别出串口&#xff0c;我这边显示的串行通信端口是COM3 二、打开VirtualBox&#xff0c;设置串口和USB设备 串口设置&#xff1a; 启用…

Python 自动化 打开网站 填表登陆 例子

图样 简价&#xff1a; 简要说明这个程序的功能&#xff1a; 1. **基本功能**&#xff1a; - 自动打开网站 - 自动填写登录信息&#xff08;号、公司名称、密码&#xff09; - 显示半透明状态窗口实时提示操作进度 2. **操作流程**&#xff1a; - 打开网站后自动…

本原多项式

将 G F ( p ) GF(p) GF(p)延伸为有 p m p^m pm个元素的域&#xff0c;称之为 G F ( p ) GF(p) GF(p)的扩域&#xff0c;表示为 G F ( p m ) GF(p^m) GF(pm). G F ( p ) GF(p) GF(p)是 G F ( p m ) GF(p^m) GF(pm)的子集。 G F ( p m ) GF(p^m) GF(pm)元素个数为 p m p^m pm。 …

【物联网技术与应用】实验15:电位器传感器实验

实验15 电位器传感器实验 【实验介绍】 电位器可以帮助控制Arduino板上的LED闪烁的时间间隔。 【实验组件】 ● Arduino Uno主板* 1 ● 电位器模块* 1 ● USB电缆*1 ● 面包板* 1 ● 9V方型电池* 1 ● 跳线若干 【实验原理】 模拟电位器是模拟电子元件&#xff0c;模…

能省一点是一点 - 享元模式(Flyweight Pattern)

享元模式&#xff08;Flyweight Pattern&#xff09; 享元模式&#xff08;Flyweight Pattern&#xff09;享元模式&#xff08;Flyweight Pattern&#xff09;概述享元模式包含的角色&#xff1a;享元模式应用场景 talk is cheap&#xff0c; show you my code总结 享元模式&a…

学习C++:变量

变量&#xff1a; 作用&#xff1a;给一段指定的内存空间起名&#xff0c;方便操作这段内容 &#xff08;变量存在的意义&#xff1a;方便我们管理内存空间&#xff09; 语法&#xff1a;数据类型 变量名 初始值&#xff1b; 实例&#xff1a;

蓝桥杯物联网开发板硬件组成

第一节 开发板简介 物联网设计与开发竞赛实训平台由蓝桥杯大赛技术支持单位北京四梯科技有限公司设计和生产&#xff0c;该产品可用于参加蓝桥杯物联网设计与开发赛道的竞赛实训或院校相关课程的 实践教学环节。 开发板基于STM32WLE5无线微控制器设计&#xff0c;芯片提供了25…

Day35汉明距离

两个整数之间的 汉明距离 指的是这两个数字对应二进制位不同的位置的数目。 给你两个整数 x 和 y&#xff0c;计算并返回它们之间的汉明距离。 class Solution {public int hammingDistance(int x, int y) {int cnt 0;while (Math.max(x, y) ! 0) {if ((x & 1) ! (y &…

matplotlib pyton 如何画柱状图,利用kimi,直接把图拉倒上面,让他生成

要绘制类似于您提供的图像的柱状图&#xff0c;您可以使用Python中的Matplotlib库&#xff0c;这是一个非常流行的绘图库。以下是一个简单的示例代码&#xff0c;展示如何使用Matplotlib来创建一个类似的柱状图&#xff1a; python import matplotlib.pyplot as plt import nu…