elementui Cascader 级联选择器的使用总结

实现效果

 技术要点总结如下:

 1、点击添加自动增加多行,实现自主选择增加多条节点数据

 2、节点地址使用的是Cascader 级联选择器,需要动态生成,涉及到一个技术要点是:因v-modal只能获取value不能获取label,故需要解决在多个动态生成的Cascader 分别获取他们选中的label和value,


 

下面开始展示相关代码:html:<el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddPlatCarLineDetail">添加</el-button></el-col><el-col :span="1.5"><el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeletePlatCarLineDetail">删除</el-button></el-col></el-row><el-table :data="platCarLineDetailList" :row-class-name="rowPlatCarLineDetailIndex" @selection-change="handlePlatCarLineDetailSelectionChange" ref="platCarLineDetail"><el-table-column type="selection" width="50" align="center" /><el-table-column label="序号" align="center" prop="index" width="50"/><el-table-column label="节点名称" prop="nodeName" width="150"><template slot-scope="scope"><el-input v-model="scope.row.nodeName" placeholder="请输入节点名称" /></template></el-table-column><el-table-column label="节点地址" prop="nodeAddress" width="250" ><template slot-scope="scope"><el-cascaderv-model="valueNode[scope.$index]":options="optionsNodeSource":props="{value:'id',label:'name'}":ref="'cascader'+scope.$index"@change="handleChange(scope.$index)"></el-cascader></template></el-table-column> </el-table></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>
js:handleChange(index){var that=thisvar name='cascader'+index
//this.valueNode[index] 对应的是省市区的id  nameArr对应的是省市区的namevar nameArr=this.$refs[name].getCheckedNodes()[0].pathLabelsthat.$nextTick(function () {that.platCarLineDetailList[index].nodeAddress=nameArrconsole.log(that.platCarLineDetailList,that.valueNode)that.$forceUpdate()})
},
/** 车线详情添加按钮操作 */
handleAddPlatCarLineDetail() {var that=thisthat.$nextTick(function () {let obj = {};obj.nodeName = "";obj.nodeAddress = ""; that.valueNode.push([])//在data中定义格式为[[]]that.platCarLineDetailList.push(obj); that.$forceUpdate()})
},
/** 车线详情删除按钮操作 */
handleDeletePlatCarLineDetail() {if (this.checkedPlatCarLineDetail.length == 0) {this.$modal.msgError("请先选择要删除的车线详情数据");} else {const platCarLineDetailList = this.platCarLineDetailList;const valueNode = this.valueNode;const checkedPlatCarLineDetail = this.checkedPlatCarLineDetail;this.platCarLineDetailList = platCarLineDetailList.filter(function(item) {return checkedPlatCarLineDetail.indexOf(item.index) == -1});this.valueNode = valueNode.filter(function(item,indexV) {var num=indexV+1return checkedPlatCarLineDetail.indexOf(num) == -1});}
},

 代码解释

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

汇编实现从1加到1000(《X86汇编语言 从实模式到保护模式(第2版》) 第135页第2题解答)

题目: 编写一段主引导扇区程序,计算从1加到1000的和,并在屏幕上显示结果 输出结果: 代码: jmp near start text db 123...1000 start:mov ax,0x07c0mov ds,ax ;数据段从主引导区开始mov ax,0xb800mov es,ax ;显存地址从B8000物理地址开始mov si,text ;si指向text的第…

极狐GitLab 新一代容器镜像仓库正式上线啦!

从极狐GitLab 17.3 开始&#xff0c;私有化部署实例也可以使用新一代容器镜像仓库啦&#xff01;新一代容器镜像仓库具有更高效的零宕机垃圾收集功能和其他优势。 从去年开始&#xff0c;极狐GitLab 就启动了重构容器镜像仓库的计划&#xff0c;用以构建具有更强功能的镜像仓库…

什么是测试驱动开发?

测试驱动开发&#xff08;Test-Driven Development&#xff0c;简称TDD&#xff09;是一种软件开发方法&#xff0c;它强调在编写功能代码之前&#xff0c;先编写测试代码。这种方法的核心思想是通过测试来推动整个开发过程的进行&#xff0c;确保代码的质量和可维护性。 一、基…

Hibernate QueryPlanCache 查询计划缓存引发的内存溢出

目录 1.排查方式2.结论3.解决办法 前言&#xff1a;在生产环境中有一个后端程序多次报oom然后导致程序中断。 1.排查方式 通过下载后端程序产生的oom文件&#xff0c;将oom文件导入MemoryAnalyzer程序分析程序堆内存使用情况。 1、将oom文件导入MemoryAnalyzer后可以看到概览信…

玩转扩展库,温湿度传感器篇!—合宙Air201资产定位模组LuatOS快速入门05

随着LuatOS快速入门系列教程的推出&#xff0c;小伙伴们学习热情高涨。 合宙Air201不仅支持三种定位方式&#xff0c;还具有丰富的扩展功能&#xff0c;通过外扩BTB链接方案&#xff0c;最多可支持21个IO接口&#xff1a;SPI、I2C、UART等多种接口全部支持。 本期&#xff0c…

uniapp小程序富文本编辑器 简单不需要下载插件 复制代码直接复用

题外话&#xff1a;富文本编辑器搞了好久&#xff0c;下载好几个插件&#xff0c;都没成功&#xff0c;最后复制这篇文章的代码&#xff0c;我又修改了一点东西&#xff0c;就成功了&#xff1a;&#xff08;买下面的css文件还花了2块钱&#xff0c;现在我免费给大家&#xff0…

STM32常用数据采集滤波算法

例如&#xff0c;STM32进行滤波处理时&#xff0c;主要目的是处理数据采集过程中可能产生的噪声和尖刺信号。这些噪声可能来自电源干扰、传感器自身的不稳定性或其他外部因素。 1.一阶互补滤波 方法&#xff1a;取a0~1,本次滤波结果&#xff08;1-a&#xff09;本次采样值a上…

[开源]YOLOv8+Pyside6的交通红绿灯目标检测源码

[开源]YOLOv8Pyside6的交通红绿灯目标检测源码 一. 项目介绍源码链接 该系统是yolov8目标检测可视化界面检测系统&#xff0c;支持图片、视频、摄像头检测. 系统的模型是自己训练的模型, 源码自取 源码链接 如需自己训练模型, 数据集链接 二. 作者的运行环境 python3.8tor…

828华为云征文|华为云Flexus X实例docker部署mediacms,功能齐全的现代化开源视频和媒体CMS

828华为云征文&#xff5c;华为云Flexus X实例docker部署mediacms&#xff0c;功能齐全的现代化开源视频和媒体CMS 华为云最近正在举办828 B2B企业节&#xff0c;Flexus X实例的促销力度非常大&#xff0c;特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、…

【专题】2024年8月医药行业报告合集汇总PDF分享(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p37621 在科技飞速发展的当今时代&#xff0c;医药行业作为关乎人类生命健康的重要领域&#xff0c;正处于前所未有的变革浪潮之中。数智医疗服务的崛起&#xff0c;为医疗模式带来了全新的转变&#xff0c;开启了医疗服务的新时代。…

git如何灵活切换本地账号对应远程github的两个账号

git如何灵活切换本地账号对应远程github的两个账号 问题&#xff1a; 有时候我们会同时维护两个github的账号里面的仓库内容&#xff0c;这时候本地git需要频繁的切换ssh&#xff0c;以方便灵活的与两个账号的仓库可以通信。这篇日记将阐述我是怎么解决这个问题的。1. 第一个账…

Linux shell编程学习笔记78:cpio命令——文件和目录归档工具(上)

0 前言 在Linux系统中&#xff0c;除了tar命令&#xff0c;我们还可以使用cpio命令来进行文件和目录的归档。 1 cpio命令的功能&#xff0c;帮助信息&#xff0c;格式&#xff0c;选项和参数说明 1.1 cpio命令的功能 cpio 名字来自 "copy in, copy out"&#xf…

游戏开发| Unreal5.2-5.4接入chatGPT定制游戏NPC

引擎版本UE5.2 (也支持到5.4,有试用其它插件所以选择之前版本) 使用插件(免费) 1.VArest (插件官方介绍:Plugin that makes REST communications much easier.)可以让REST(Representational State Transfer)通信变得更加容易,涉及客户端与服务器之间通过 HTTP 协议…

windows C++-并行编程-并行算法(四)- 并行排序

并行模式库 (PPL) 提供了对数据集合并行地执行工作的算法。这些算法类似于 C 标准库提供的算法。并行算法由并发运行时中的现有功能组成。 PPL 提供三种排序算法&#xff1a;concurrency::parallel_sort、concurrency::parallel_buffered_sort 和 concurrency::parallel_radix…

VS Code 配置 Rust-Analyzer 报错

报错信息&#xff1a; Bootstrap Error" rust-analyzer requires glibc > 2.28 in latest build. 参考了好多地方&#xff0c; https://github.com/rust-lang/rust-analyzer/issues/11558 https://blog.csdn.net/aLingYun/article/details/120923694 https://rust-anal…

Fair Graph RepresentationLearning via Diverse Mixture-of-Experts

发表于&#xff1a;WWW23 推荐指数&#xff1a; #paper/⭐⭐ 问题背景&#xff1a; 背景 现实世界的数据很多样&#xff0c;阻止GNN学习公平的表示。当去偏见化后&#xff0c;他们面临着可学知识不足且属性有限的重大问题 解决方法&#xff1a; 应对公平训练导致可学习知识…

TC3xx系列芯片--PortDio模块介绍

1、模块介绍 Port(端口)是芯片与板上其他外设或逻辑电路交互的重要引脚&#xff0c;用于芯片发出控制信号或接收外部信号。通过GPIO模式或各类通讯模式&#xff0c;对板载设备进行控制。 Aurix TC3xx系列芯片具有丰富的Port连接&#xff0c;而且每个Pin脚具有多种功能复用&am…

搜索软件 Everything 的安装与使用教程

一、Everything简介 适用于 Windows 的免费搜索工具 Everything 是 Windows 的即时搜索引擎。发现、整理并轻松访问文件和文件夹&#xff0c;一切尽在指尖&#xff01; PS&#xff1a;Everything无法对文件内容进行搜索&#xff0c;只能根据文件名和路径进行搜索 二、Everyt…

面向对象程序设计之模板进阶(C++)

在之前我出过一篇博客介绍了模版的初阶:面向对象程序设计(C)模版初阶&#xff0c;接下来我们将进行模版的进阶学习&#xff0c;介绍关于更多模版的知识 1.非类型模版参数 模板参数分类类型形参与非类型形参 类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或…

电力系统调度控制台的功能有哪些

在复杂多变的现代电力系统中&#xff0c;调度控制台作为其核心管理与控制的中枢&#xff0c;扮演着不可或缺的角色。它不仅是确保电网安全稳定运行的关键&#xff0c;也是实现电力资源高效配置的重要工具。那么&#xff0c;电力系统调度控制台究竟具备哪些关键功能呢? 首先&am…