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

embedded/2024/12/29 4:14:18/
  <el-form-itemlabel="开关配置":rules="[{ required: false, message: '开关配置', trigger: 'blur' }]"><el-cascaderstyle="width: 300px"clearablecollapse-tagsfilterable: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-inputv-elsev-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.ppmy.cn/embedded/149639.html

相关文章

IDC TechScape|云轴科技ZStack入选中国生成式 AI 技术代表厂商

近日&#xff0c;国际数据公司IDC发布了《IDC TechScape&#xff1a;中国生成式人工智能技术与品牌推荐》&#xff08;2024年11月&#xff09;报告&#xff0c;讨论了生成式人工智能&#xff08;GenAI&#xff09;和与之密切相关的系统技术&#xff0c;列举了相关领域中国市场的…

【Android、IOS、Flutter、鸿蒙、ReactNative 】实现 MVP 架构

Android Studio 版本 Android Java MVP 模式 参考 模型层 model public class User {private String email;private String password;public User(String email, String password) {this.email = email;this.password = password;}public String getEmail() {return email;}…

两个控制器NTP/ptp时间同步

在两个Ubuntu系统之间设置NTP时间同步&#xff0c;确保一个作为NTP服务器&#xff0c;另一个作为客户端&#xff0c;具体步骤如下&#xff1a; 步骤 1&#xff1a;设置NTP服务器 1.1 安装NTP服务 在作为服务器的Ubuntu系统上&#xff0c;安装NTP服务&#xff1a; bash 复制代…

STM32-KEIL5中相关设置

1、自定义关键字设置&#xff0c;以及自定义快捷键设置 参考网站&#xff1a;Keil自定义关键字、 快捷键-电子发烧友网

case 管理页面静态布局以及功能实现

在做 react 项目的时候&#xff0c;项目需求中有一个展示家族成员 case 管理的画面&#xff0c;左侧以列表的形式展示成员以及成员相关的case 列表&#xff0c;左侧则是与列表case 时间相对应的图表展示 实现方式如下&#xff1a; import { useState, useEffect, useRef } fro…

【Unity3D】ECS入门学习(五)共享组件 ISharedComponentData

using Unity.Entities; using System;//[GenerateAuthoringComponent] 无法生效 必须手动添加 public struct MyShareComponentData : ISharedComponentData, IEquatable<MyShareComponentData> {public int data;public bool Equals(MyShareComponentData other){return…

windows nvm 切换node版本后,npm找不到

前言 在 windows 使用 nvm&#xff0c;管理 node 版本时&#xff0c;nvm install 14.21.3 后&#xff0c;发现在指定 node 版本的 node_modules 文件夹中没有对应的 npm 包&#xff0c;这时有两种方法解决&#xff0c;第一种配置自动下载 npm&#xff0c;第二种手动下载 npm 更…

Debian安装配置RocketMQ

安装配置 本次安装在/tools/rocket目录下 下载 wget https://dist.apache.org/repos/dist/release/rocketmq/5.3.1/rocketmq-all-5.3.1-bin-release.zip 解压缩 unzip rocketmq-all-5.3.1-bin-release.zip 如果出现以下报错 -bash: unzip: command not found可安装unzip工具后执…