当前位置: 首页 > article >正文

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


http://www.kler.cn/a/455293.html

相关文章:

  • UE(虚幻)学习(三) UnrealSharp插件中调用非托管DLL
  • Oracle Managed Files(OMF)
  • openGauss与GaussDB系统架构对比
  • QT线程 QtConcurrent (深入理解)
  • 虚幻引擎结构之UObject
  • WinForm 美化秘籍:轻松实现 Panel 圆角虚线边框
  • TCP off-path exploits(又一个弄巧成拙的例子)
  • PyAudio库基本知识详解——为自制PCM音频播放器做准备
  • 指针详解之 难点、易错点一次性彻底击碎!
  • vue3和springboot使用websocket通信
  • AI发展新态势:从技术突破到安全隐忧
  • MySql:复合查询
  • react中使用ResizeObserver来观察元素的size变化
  • 在线免费批量生成 Word 文档工具
  • Linux编程(清华大学出版社2019年1月第1版)第7章-进程间通信-课后作业
  • 信息安全管理:信息系统开发与维护安全控制要点与管理策略
  • 链原生 Web3 AI 网络 Chainbase 推出 AVS 主网, 拓展 EigenLayer AVS 场景
  • 【minicom】Linux串口调试工具 - minicom的安装及使用
  • Temporary failure resolving ‘security.ubuntu.com‘
  • flask后端开发(8):Flask连接MySQL数据库+ORM增删改查
  • 【HarmonyOS】鸿蒙arrayBuffer和Uint8Array互相转化
  • python基础项目
  • 5G/4G工业边缘网关 边缘计算 硬核配置强算力
  • 使用three.js 实现vr全景图展示,复制即可用
  • C语言的语法
  • 集成 jacoco 插件,查看单元测试覆盖率