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

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;

                 });

            }

效果:

 

 

相关文章:

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

vue 的cascader研究了好长时间&#xff0c;看了官网给的示例&#xff0c;上网查找了好多信息&#xff0c;才解决修改时回显的问题&#xff0c;现将方法总结如下&#xff1a; vue代码&#xff1a; <el-form-item label"芯片" prop"firmware"> <…...

C语言实现三子棋游戏

test.c源文件 - 三子棋游戏测试 game.h头文件 - 三子棋游戏函数的声明 game.c源文件 - 三子棋游戏函数的实现 主函数源文件&#xff1a; #define _CRT_SECURE_NO_WARNINGS 1#include"game.h" //自己定义的用"" void menu() {printf("*************…...

机器学习深度学习——softmax回归从零开始实现

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——向量求导问题 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助 …...

Windows如何安装Django及如何创建项目

目录 1、Windows安装Django--pip命令行 2、创建项目 2.1、终端创建项目 2.2、在Pycharm中创建项目 2.3、二者创建的项目有何不同 2.4、项目目录说明 1、Windows安装Django--pip命令行 安装Django有两种方式&#xff1a; pip命令行【推荐--简单】手动安装【稍微复杂一丢丢…...

在CSDN学Golang云原生(监控解决方案Prometheus)

一&#xff0c;记录规则配置 在golang云原生中&#xff0c;通常使用日志库记录应用程序的日志。其中比较常见的有logrus、zap等日志库。这些库一般支持自定义的输出格式和级别&#xff0c;可以根据需要进行配置。 对于云原生应用程序&#xff0c;我们通常会采用容器化技术将其…...

双重for循环优化

项目中有段代码逻辑是个双重for循环&#xff0c;发现数据量大的时候&#xff0c;直接导致数据接口响应超时&#xff0c;这里记录下不断优化的过程&#xff0c;算是抛砖引玉吧~ Talk is cheap,show me your code&#xff01; 双重for循环优化 1、数据准备2、原始双重for循环3、…...

golang利用go mod巧妙替换使用本地项目的包

问题 拉了两个项目下来&#xff0c;其中一个项目依赖另一个项目&#xff0c;因为改动了被依赖的项目&#xff0c;想重新导入测试一下。 解决办法 go.mod文件的require中想要被代替的包名在replace中进行一个替换&#xff0c;注意&#xff1a;用来替换的需要用绝对路径&#xf…...

使用 docker 一键部署 MySQL

目录 1. 前期准备 2. 导入镜像 3. 创建部署脚本文件 4. MySQL 服务器配置文件模板 5. 执行脚本创建容器 6. 后续工作 7. 基本维护 1. 前期准备 新部署前可以从仓库&#xff08;repository&#xff09;下载 MySQL 镜像&#xff0c;或者从已有部署中的镜像生成文件&#x…...

MyBatis-Plus 查询PostgreSQL数据库jsonb类型保持原格式

文章目录 前言数据库问题背景后端返回实体对象前端 实现后端返回List<Map<String, Object>>前端 前言 在这篇文章&#xff0c;我们保存了数据库的jsonb类型&#xff1a;MyBatis-Plus 实现PostgreSQL数据库jsonb类型的保存与查询 这篇文章介绍了模糊查询json/json…...

Linux操作系统1-命令篇

不同领域的主流操作系统 桌面操作系统 Windos Mac os Linux服务器操作系统 Unix Linux(免费、稳定、占有率高) Windows Server移动设备操作系统 Android(基于Linux,开源) ios嵌入式操作系统 Linux(机顶盒、路由器、交换机) Linux 特点&#xff1a;免费、开源、多用户、多任务…...

opencv-24 图像几何变换03-仿射-cv2.warpAffine()

什么是仿射&#xff1f; 仿射变换是指图像可以通过一系列的几何变换来实现平移、旋转等多种操作。该变换能够 保持图像的平直性和平行性。平直性是指图像经过仿射变换后&#xff0c;直线仍然是直线&#xff1b;平行性是指 图像在完成仿射变换后&#xff0c;平行线仍然是平行线。…...

前端常用的条件限制方法小笔记

手机号的正则表达式(以1开头的11位数字) function checkPhone(){ var phone document.getElementById(phone).value;if(!(/^1[3456789]\d{9}$/.test(phone))){ alert("手机号码有误&#xff0c;请重填"); return false; } }限制输入大于0且最小值要小于最大值 c…...

【LeetCode 算法】Minimum Operations to Halve Array Sum 将数组和减半的最少操作次数-Greedy

文章目录 Minimum Operations to Halve Array Sum 将数组和减半的最少操作次数问题描述&#xff1a;分析代码TLE优先队列 Tag Minimum Operations to Halve Array Sum 将数组和减半的最少操作次数 问题描述&#xff1a; 给你一个正整数数组 nums 。每一次操作中&#xff0c;你…...

Doc as Code (3):业内人士的观点

作者 | Anne-Sophie Lardet 在技术传播国际会议十周年之际&#xff0c;Fluid Topics 的认证技术传播者和功能顾问 Gaspard上台探讨了“docOps 作为实现Doc as Code的中间结构”的概念。在他的演讲中&#xff0c;观众提出了几个问题&#xff0c;我们想分享Gaspard的见解&#x…...

【Kafka】消息队列Kafka基础

目录 消息队列简介消息队列的应用场景异步处理系统解耦流量削峰日志处理 消息队列的两种模式点对点模式发布订阅模式 Kafka简介及应用场景Kafka比较其他MQ的优势Kafka目录结构搭建Kafka集群编写Kafka一键启动/关闭脚本 Kafka基础操作创建topic生产消息到Kafka从Kafka消费消息使…...

Java的第十五篇文章——网络编程(后期再学一遍)

目录 学习目的 1. 对象的序列化 1.1 ObjectOutputStream 对象的序列化 1.2 ObjectInputStream 对象的反序列化 2. 软件结构 2.1 网络通信协议 2.1.1 TCP/IP协议参考模型 2.1.2 TCP与UDP协议 2.2 网络编程三要素 2.3 端口号 3. InetAddress类 4. Socket 5. TCP网络…...

【深度学习】High-Resolution Image Synthesis with Latent Diffusion Models,论文

13 Apr 2022 论文&#xff1a;https://arxiv.org/abs/2112.10752 代码&#xff1a;https://github.com/CompVis/latent-diffusion 文章目录 PS基本概念运作原理 AbstractIntroductionRelated WorkMethodPerceptual Image CompressionLatent Diffusion Models Conditioning Mec…...

前端学习——Vue (Day6)

路由进阶 路由的封装抽离 //main.jsimport Vue from vue import App from ./App.vue import router from ./router/index// 路由的使用步骤 5 2 // 5个基础步骤 // 1. 下载 v3.6.5 // 2. 引入 // 3. 安装注册 Vue.use(Vue插件) // 4. 创建路由对象 // 5. 注入到new Vue中&…...

STM32MP157驱动开发——按键驱动(tasklet)

文章目录 “tasklet”机制&#xff1a;内核函数定义 tasklet使能/ 禁止 tasklet调度 tasklet删除 tasklet tasklet软中断方式的按键驱动程序(stm32mp157)tasklet使用方法&#xff1a;button_test.cgpio_key_drv.cMakefile修改设备树文件编译测试 “tasklet”机制&#xff1a; …...

PostgreSQL构建时间

– PostgreSQL构建时间 select make_timestamp(2023,7,27,7,34,16);...

2023-将jar包上传至阿里云maven私有仓库(云效制品仓库)

一、背景介绍 如果要将平时积累的代码工具jar包&#xff0c;上传至云端&#xff0c;方便团队大家一起使用&#xff0c;一般的方式就是上传到Maven中心仓库&#xff08;但是这种方式步骤多&#xff0c;麻烦&#xff0c;而且上传之后审核时间比较长&#xff0c;还不太容易通过&a…...

嵌入式linux之OLED显示屏SPI驱动实现(SH1106,ssd1306)

周日业余时间太无聊&#xff0c;又不喜欢玩游戏&#xff0c;大家的兴趣爱好都是啥&#xff1f;我觉得敲代码也是一种兴趣爱好。正巧手边有一块儿0.96寸的OLED显示屏&#xff0c;一直在吃灰&#xff0c;何不把玩一把&#xff1f;于是说干就干&#xff0c;最后在我的imax6ul的lin…...

关于element ui 安装失败的问题解决方法、查看是否安装成功及如何引入

Vue2引入 执行npm i element-ui -S报错 原因&#xff1a;npm版本太高 报错信息&#xff1a; 解决办法&#xff1a; 使用命令&#xff1a; npm install --legacy-peer-deps element-ui --save 引入&#xff1a; 在main.js文件中引入 //引入Vue import Vue from vue; //引入…...

Selenium多浏览器处理

Python 版本 #导入依赖 import os from selenium import webdriverdef test_browser():#使用os模块的getenv方法来获取声明环境变量browserbrowser os.getenv("browser").lower()#判断browser的值if browser "headless":driver webdriver.PhantomJS()e…...

浅谈 AI 大模型的崛起与未来展望:马斯克的 xAI 与中国产业发展

文章目录 &#x1f4ac;话题&#x1f4cb;前言&#x1f3af;AI 大模型的崛起&#x1f3af;中国 AI 产业的进展与挑战&#x1f3af;AI 大模型的未来展望&#x1f9e9;补充 &#x1f4dd;最后 &#x1f4ac;话题 北京时间 7 月 13 日凌晨&#xff0c;马斯克在 Twiiter 上宣布&am…...

【CesiumJS材质】(1)圆扩散

效果示例 最佳实践&#xff1a; 其他效果&#xff1a; 要素说明&#xff1a; 代码 /** Date: 2023-07-21 15:15:32* LastEditors: ReBeX 420659880qq.com* LastEditTime: 2023-07-27 11:13:17* FilePath: \cesium-tyro-blog\src\utils\Material\EllipsoidFadeMaterialP…...

实战-单例模式和创建生产者相结合

实际中遇到了这样一个问题&#xff1a; The producer group[xxxx] has been created before, specify another instanceName (like producer.setInstanceName) please. 发生的原因是&#xff1a;一个进程内&#xff0c;创建了多个相同topic的producer。 所以问题就转换成了如何…...

[SQL挖掘机] - 窗口函数介绍

介绍: 窗口函数也称为 OLAP 函数。OLAP 是 OnLine AnalyticalProcessing 的简称&#xff0c;意思是对数据库数据进行实时分析处理。窗口函数是一种用于执行聚合计算和排序操作的功能强大的sql函数。它们可以在查询结果集中创建一个窗口&#xff08;window&#xff09;&#xf…...

原生js实现锚点滚动顶部

简介 使用原生js API实现滚动到指定容器的顶部&#xff0c;API是scrollIntoView 使用 let eldocment.querySelector() 获取dom元素el.scrollIntoView()该元素滚动到其父元素的顶部 高级用法 scrollIntoView(Options)//option可以配置如下 options{behavior&#xff1a;smoot…...

使用mysql接口遇到点问题

game_server加入了dbstorage的代码。dbstorage实现了与mysql的交互&#xff1a;driver_mysql。其中调用了mysql相关的接口。所以game_server需要链接libmysql.lib。 从官网下载了mysql的源码&#xff1a;在用cmake构建mysql工程的时候&#xff0c;遇到了一些问题。 msyql8.0需…...

重庆做网站建设企业/百度自媒体平台

【人工智能】Astar算法求解8数码问题&#xff08;QDU&#xff09; 【人工智能】利用α-β搜索的博弈树算法编写一字棋游戏&#xff08;QDU&#xff09; 【人工智能】Fisher 线性分类器的设计与实现&#xff08;QDU&#xff09;【人工智能】感知器算法的设计实现&#xff08;QDU…...

做云盘网站哪个好/百度推广销售

JavaScrip中如何实现继承 Java中实现继承通过关键字extands来实现的&#xff0c;而javascrip中没有该关键字&#xff0c;通过以下方法可以实现继承关系&#xff1a; 先定义一个父类 //定义一个动物类function Animal(name){this.namename || Animal;this.sleepfunction(){do…...

wordpress更改固定连接后404/aso关键词排名优化是什么

什么是Hibernate Hibernate是一个开放源代码的对象关系映射框架&#xff0c;它对JDBC进行了非常轻量级的对象封装&#xff0c;它将POJO与数据库表建立映射关系&#xff0c;是一个全自动的orm框架&#xff0c;hibernate可以自动生成SQL语句&#xff0c;自动执行&#xff0c;使得…...

wordpress 推广返利/今日重大新闻头条

题目链接&#xff1a; http://codeforces.com/problemset/problem/831/A 题目描述&#xff1a; 让你判断数列是不是符合题目描述的规律增长 解题思路&#xff1a; 我知道我的思路是对的&#xff0c; 但是肯定是不好的&#xff0c; 因为BUG特别难找 代码&#xff1a; #include …...

wordpress 淘宝/cba目前排名

今天IIS出了问题,怎么弄都不能显示asp页面,htm文件倒是可以显示,结果网上搜索了许多所谓"解决方案",最后以把我的IIS彻底搞得卸也卸不掉,重装也装不上去的境地,安装和卸载时老是提示:文件复制被取消,安装程序无法继续. 最终靠强制手工卸载IIS6而搞定: 原文如下: 1、把…...

二级域名网站建设规范/正规seo大概多少钱

许多情况下&#xff0c;如果创建或修改一个文件&#xff0c;系统需要执行某些任务&#xff0c;如果目录中新建了一个文件&#xff0c;程序必须提取这个文件、进行解析、再把它插入到数据库中。在这种情况下&#xff0c;程序必须监控目录的变化。在.NET Framework中&#xff0c;…...