vue中Cascader 级联选择器实现-修改实现

vue 的cascader研究了好长时间,看了官网给的示例,上网查找了好多信息,才解决修改时回显的问题,现将方法总结如下:

vue代码:

<el-form-item   label="芯片" prop="firmware">

                <el-cascader

                    ref="cascader"

                    :options="firmwareTypeOptions"

                    v-model="form.firmware"  

                    placeholder="请选择固件版本类型" style="width:100%"></el-cascader>

     </el-form-item>

js:

data中:

// 父节点

 firmwareTypeOptions:null,

firmwareMaps: {

        value:null,

        label: null,

       children: null

}

---------------------------方法实现-------------------------

getDictsOne(){

                getDicts(this.inverterFirmwareVersionType).then(response => {

                    // 定义数组

                    const nodes=[];

                    var arr=response.data;

                    for(let i = 0; i <arr.length; i++) {

                        let maps=[];

                        // 赋值

                        maps.value=arr[i].dictValue;

                        maps.label=arr[i].dictLabel;

                            // 网络模块子模块

                            if(parseInt(arr[i].dictValue)===1){

                                getDicts(this.inverterFirmwareNetworkModule).then(response => {

                                    const  nodess =response.data.map((i, index) => ({

                                        value: i.dictValue,

                                        label: i.dictLabel,

                                    }));

                                    maps.children=nodess;

                                });

                            }

                            // 主控模块子模块

                            if(parseInt(arr[i].dictValue)===2){

                                getDicts(this.inverterFirmwareMainModule).then(response => {

                                    const nodess =response.data.map((i, index) => ({

                                        value: i.dictValue,

                                        label: i.dictLabel,

                                    }));

                                    maps.children=nodess;

                                });

                            }

                            nodes.push(maps);

                        }

                    this.firmwareTypeOptions=nodes;

                 });

            }

效果:

 

 

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

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

相关文章

C++-----stack和queue

本期我们来学习stack和queue 目录 stack介绍 栈的使用 栈的模拟实现 queue介绍 队列的使用 队列的模拟实现 deque 优先级队列 模拟实现 仿函数 全部代码 stack介绍 1. stack 是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除…

3D工厂模拟仿真 FACTORY I/O 2.55 Crack

FACTORY I/O 提供超过20个典型的工业应用场景让您如身临其境般地练习控制任务。选择一种场景直接使用或以其作为一个新项目的开端。学生可以利用内嵌的可编辑的典型工业系统模板&#xff0c;也可以自由搭建并编辑工业系统。同时该系统具有全方位3D视觉漫游&#xff0c;可随意放…

在Vue-Element中引入jQuery的方法

一、在终端窗口执行安装命令 npm install jquery --save执行完后&#xff0c;npm会自动在package.json中加上jquery 二、在main.js中引入&#xff08;或者在需要使用的页面中引入即可&#xff09; import $ from jquery三、使用jquery

5、Kubernetes核心技术 - Controller控制器工作负载

目录 一、Deployments - 控制器应用 二、Deployment升级回滚和弹性收缩 2.1、创建一个 1.14 版本的 pod 2.2、应用升级 2.3、查看升级状态 2.4、查看历史版本 2.5、应用回滚 2.6、弹性伸缩 三、StatefulSet - 有状态应用 四、DaemonSet - 守护进程 五、Job - 单次任…

Centos7 安装tomcat9

去官网下载 数据包 ps: wget https://dlcdn.apache.org/tomcat/tomcat-9/v9.0.78/bin/apache-tomcat-9.0.78.tar.gz检查Java环境 [tomcatlocalhost bin]$ java -version java version "1.8.0_121" Java(TM) SE Runtime Environment (build 1.8.0_121-b13) Java H…

js的变量

目录 变量 var和let 1.for循环中的声明 2.暂时性死区 3.全局声明 4.条件声明 const声明 变量 java是一种强数据类型语言,对数据类型要求高&#xff0c;要声明清楚变量的类型 数据类型 变量名 值 -----> int a 10 而javaScrit是一种弱类型语言&#xff0c;在声明变…

【图像去噪】基于进化算法——自组织迁移算法(SOMA)的图像去噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

k8s Webhook 使用java springboot实现webhook 学习总结

k8s Webhook 使用java springboot实现webhook 学习总结 大纲 基础概念准入控制器&#xff08;Admission Controllers&#xff09;ValidatingWebhookConfiguration 与 MutatingWebhookConfiguration准入检查&#xff08;AdmissionReview&#xff09;使用Springboot实现k8s-Web…

一文谈谈Git

"And if forever lasts till now Alright" 为什么要有git&#xff1f; 想象一下&#xff0c;现如今你的老师同时叫你和张三&#xff0c;各自写一份下半年的学习计划交给他。 可是你的老师是一个极其"较真"的人&#xff0c;发现你俩写的学习计划太"水&…

深度剖析APP开发中的UI/UX设计

作为一个 UI/UX设计师&#xff0c;除了要关注 UI/UX设计之外&#xff0c;还要掌握移动开发知识&#xff0c;同时在日常工作中也需要对用户体验有一定的认知&#xff0c;在本次分享中&#xff0c;笔者就针对自己在工作中积累的一些经验来进行一个总结&#xff0c;希望能够帮助到…

软件兼容性测试中需注意的关键问题

在进行软件兼容性测试时&#xff0c;有一些关键问题需要特别注意&#xff0c;以确保测试的准确性和全面性。本文将介绍一些在软件兼容性测试中需注意的关键问题&#xff0c;帮助测试人员更好地进行兼容性测试工作。 首先&#xff0c;测试范围&#xff0c;测试人员需要明确测试的…

pycharm 远程连接服务器并且debug, 支持torch.distributed.launch debug

未经允许&#xff0c;本文不得转载&#xff0c;vx&#xff1a;837007389 文章目录 step1&#xff1a;下载专业版本的pycharmstep2 配置自动同步文件夹&#xff0c;即远程的工程文件和本地同步2.1 Tools -> Deployment -> configuration2.2 设置同步文件夹2.3 同步服务器…

火山引擎DataLeap的Data Catalog系统公有云实践 (下)

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 Data Catalog公有云遇到的挑战 Data Catalog经历了一个从0到1在火山引擎公有云部署并逐步优化和迭代发布10版本的过程&#xff0c;在这个过程中经历不少挑战&#…

SQL语句(三十二)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、SQL语句类型 二、数据库操作 ​三、数据表操作 1. 数据类型 2. 查看 3. 创建 4. 删除 5. 更改 5.1 表 5.2 列 四、数据操作 4.1 增 4.2 删 4.3 改 4.4 查…

HHDESK便捷功能介绍三

1 连接便捷显示 工作中&#xff0c;往往需要设置很多资源连接。而过多的连接设&#xff0c;往往很容易混淆。 在HHDESK中&#xff0c;当鼠标点击连接时&#xff0c;会在下方显示本连接的参数&#xff0c;方便用户查看。 2 日志查看 实际工作中&#xff0c;查看日志是一件很…

JavaSwing+MySQL的在线考试系统

点击以下链接获取源码&#xff1a; https://download.csdn.net/download/qq_64505944/88114390?spm1001.2014.3001.5503 JDK1.8 MySQL5.7 功能&#xff1a;开始做题&#xff0c;上一题&#xff0c;下一题&#xff0c;提交&#xff0c;每题都有时间限制

真实和虚拟相撞,构造的VR展厅特点和优势有哪些?

随着科技的不断发展&#xff0c;VR展厅成为了现代展览的一种全新展现方式&#xff0c;三维立体展厅的设计&#xff0c;让企业、画展、纪念展等可以创造出令人惊叹的虚拟展览空间效果&#xff0c;为用户带来丰富的体验。观众身临其境地感受实体展厅和展品&#xff0c;这种超越了…

【3】-使用@task设置测试用例执行的权重

多个测试链路压测使测试任务按预想的比例执行 locust的task装饰器提供了入参weight&#xff0c;locust执行测试任务时&#xff0c;会根据weight的比例进行分配用户数 from locust import task, HttpUserclass MyTestUser(HttpUser):# test_01 : test_02 3 : 1task(3)def wei…

实景三维在智慧矿山中的应用

项目背景 智慧矿山是以矿山数字化、信息化为前提和基础&#xff0c;对矿山生产、职业健康与安全、技术支持与后勤保障等进行主动感知、自动分析、快速处理&#xff0c;建设智慧矿山&#xff0c;最终实现安全矿山、无人矿山、高效矿山、清洁矿山的建设。 智慧矿山的可视化管理…

postgresql四种逻辑复制的状态

准备 CreateCheckpoint&#xff0c;或者bgwriter启动时&#xff0c;或者创建logicalreplicationslot时都会调用LogStandbySnapshot 记录一个XLOG_RUNNING_XACTS类型的日志。日志中记录了所有提交的事务的xid(HistoricSnapshot) 启动&#xff08;SNAPBUILD_BUILDING_SNAPSHOT&…