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

  <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;
            }
        },

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

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

相关文章

随身 WiFi 连接 X-Wrt 共享网络与 IPv6 中继配置

本文首发于只抄博客&#xff0c;欢迎点击原文链接了解更多内容。 前言 之前分享的《随身 WiFi 通过 USB 连接路由器共享网络 扩展网络覆盖范围》介绍了随身 WiFi 通过 USB 连接到路由器共享网络&#xff0c;其中留下两个小问题没有解决&#xff1a; OpenWrt 无法识别中兴微的…

3.银河麒麟V10 离线安装Nginx

1. 下载nginx离线安装包 前往官网下载离线压缩包 2. 下载3个依赖 openssl依赖&#xff0c;前往 官网下载 pcre2依赖下载&#xff0c;前往Git下载 zlib依赖下载&#xff0c;前往Git下载 下载完成后完整的包如下&#xff1a; 如果网速下载不到请使用网盘下载 通过网盘分享的文件…

家用无线路由器的 2.4GHz 和 5GHz

家中的无线路由器 WiFi 名称有两个&#xff0c;一个后面带有 “5G” 的标记&#xff0c;这让人产生疑问&#xff1a;“连接带‘5G’的 WiFi 是不是速度更快&#xff1f;” 实际上&#xff0c;这里的 “5G” 并不是移动通信中的 5G 网络&#xff0c;而是指路由器的工作频率为 5G…

【HarmonyOS NEXT】鸿蒙原生应用“上述”

鸿蒙原生应用“上述”已上架华为应用市场&#xff0c;欢迎升级了鸿蒙NEXT系统的用户下载体验&#xff0c;用原生更流畅。 个人CSDN鸿蒙专栏欢迎订阅&#xff1a;https://blog.csdn.net/weixin_44640245/category_12536933.html?fromshareblogcolumn&sharetypeblogcolumn&a…

AI开发:使用支持向量机(SVM)进行文本情感分析训练 - Python

支持向量机是AI开发中最常见的一种算法。之前我们已经一起初步了解了它的概念和应用&#xff0c;今天我们用它来进行一次文本情感分析训练。 一、概念温习 支持向量机&#xff08;SVM&#xff09;是一种监督学习算法&#xff0c;广泛用于分类和回归问题。 它的核心思想是通过…

Linux部署spring项目基础教程

目录 一、安装jdk(yum安装) 1.查看是否有jdk ​编辑 2.查找你想安装的jdk版本 3.安装你需要的版本 4.重复第一步查看版本号,看到版本号说明安装成本 二、部署服务 1.上传jar包 2.启动服务 3.脚本启动 自己搞了个服务器,部署了一个demo项目,把部署流程记录下 一、…

JS中的原型与原型链

1. 基本概念 原型&#xff08;Prototype&#xff09;&#xff1a;每个对象都有一个内部属性 [[Prototype]]&#xff0c;通常通过 __proto__ 访问&#xff08;非标准&#xff0c;但广泛支持&#xff09;。 原型链&#xff08;Prototype Chain&#xff09;&#xff1a;对象通过原…

如何从 0 到 1 ,打造全新一代分布式数据架构

导读&#xff1a;本文从 DIKW&#xff08;数据、信息、知识、智慧&#xff09; 模型视角出发&#xff0c;探讨数字世界中数据的重要性问题。接着站在业务视角&#xff0c;讨论了在不断满足业务诉求&#xff08;特别是 AI 需求&#xff09;的过程中&#xff0c;数据系统是如何一…

Docker完整技术汇总

Docker 背景引入 在实际开发过程中有三个环境&#xff0c;分别是&#xff1a;开发环境、测试环境以及生产环境&#xff0c;假设开发环境中开发人员用的是jdk8&#xff0c;而在测试环境中测试人员用的时jdk7&#xff0c;这就导致程序员开发完系统后将其打成jar包发给测试人员后…

华为 AI Agent:企业内部管理的智能变革引擎(11/30)

一、华为 AI Agent 引领企业管理新潮流 在当今数字化飞速发展的时代&#xff0c;企业内部管理的高效性与智能化成为了决定企业竞争力的关键因素。华为&#xff0c;作为全球领先的科技巨头&#xff0c;其 AI Agent 技术在企业内部管理中的应用正掀起一场全新的变革浪潮。 AI Ag…

Idea使用阿里云创建springboot项目

文章目录 创建springboot项目选择Spring Initializr配置Server URL 创建springboot项目 选择Spring Initializr 配置Server URL https://start.aliyun.com

安全教育培训小程序系统开发制作方案

安全教育培训小程序系统是为了提高公众的安全意识&#xff0c;普及安全知识&#xff0c;通过微信小程序的方式提供安全教育培训服务&#xff0c;帮助用户了解并掌握必要的安全防范措施。 一、目标用户 企业员工&#xff1a;各岗位员工&#xff0c;特别是IT部门、财务、行政等对…

MySQL 数据”丢失”事件之 binlog 解析应用

事件背景 客户反馈在晚间数据跑批后,查询相关表的数据时,发现该表的部分数据在数据库中不存在 从应用跑批的日志来看,跑批未报错,且可查到日志中明确显示当时那批数据已插入到数据库中 需要帮忙分析这批数据丢失的原因。 备注:考虑信息敏感性,以下分析场景测试环境模拟,相关数据…

2024年11月HarmonyOS应用开发者高级认证 最新题库

新增单选 1.下述代码片段中的renderGroup属性&#xff0c;对性能的影响是什么&#xff1a;A A.劣化 B.不一定 C.没有变化 D.优化 2.在刷新Image组件内容时&#xff0c;如果观察到画面会闪一下白块&#xff0c;要怎样优化才能避免白块儿出现&#xff0c;同时又不会卡住画面…

《Opencv》基础操作详解(1)

目录 一、Opencv简介 OpenCV 的主要特点 二、Opencv库安装 1、opencv-python库安装 2、opencv-contrib-python库安装 三、Opencv 基础操作 1、opencv库的导入 2、读取、展示图片 3、查看图片信息 4、控制图片显示时间、关闭窗口 5、读取灰度图 6、彩色图片转灰度图 …

springboot3版本结合knife4j生成接口文档

1.概述 knife4j官网为&#xff1a;介绍 | Knife4j (xiaominfo.com)https://doc.xiaominfo.com/docs/introduction 初步了解的码友可以初步了解一下官网的如下几个模块&#xff1a; 其中在快速开始模块中&#xff0c;不同的springboot版本都有一个使用的案例demo如下图位置&am…

Android笔记(四十一):TabLayout内的tab不滚动问题

背景 假设二级页面是上面图片的布局&#xff0c;当进来时TabLayout和ViewPager2绑定完就马上调setCustomItem&#xff0c;跳转到最后一个tab页面时&#xff0c;会发现tab不滚动&#xff0c;手动滑一下ViewPager2时才会滚动tab到正确的位置 原因分析 调用TabLayoutMediator.at…

Oracle中间件 SOA之 OSB 12C服务器环境搭建

环境信息 服务器基本信息 如下表&#xff0c;本次安装总共使用1台服务器&#xff0c;具体信息如下&#xff1a; App1服务器 归类 APP服务器 Ip Address 172.xx.30.xx HostName appdev01. xxxxx.com Alias appdev01 OSB1服务器 归类 OSB服务器 Ip Address 172.xx3…

【HENU】河南大学计院2024 计算机网络 期末复习知识点

和光同尘_我的个人主页 一直游到海水变蓝。 计网复习 第一章互联网组成类别交换方式分组交换的要点&#xff1a;分组交换的优点&#xff1a; 网络性能指标体系结构网络协议五层协议 第二章&#xff1a;物理层物理层的主要任务&#xff08;四大特性&#xff09;通信的三种方式…

深入探讨 Go 中的高级表单验证与翻译:Gin 与 Validator 的实践之道20241223

深入探讨 Go 中的高级表单验证与翻译&#xff1a;Gin 与 Validator 的实践之道 在现代后端开发中&#xff0c;表单验证是保证数据完整性和服务稳定性的核心环节。如何优雅、高效地实现表单验证&#xff0c;同时提供人性化的错误提示&#xff0c;是每位开发者的必修课。在本文中…