使用el-cascader组件写下拉级联多选并且具有全选功能

样式

说明: 级联选择器中加上全选的按钮, 并且保证数据响应式。
在这里插入图片描述

思路

  • 因为是有全选的功能,所以不能直接使用el-cascader组件, 而是选择使用el-select组件, 在此组件内部使用el-cascader-panel级联面板
  • 全选按钮也是写在el-select组件中, 并且去监听全选按钮的状态, 根据全选的状态, 决定级联面板的数据与样式
  • 如果想要获取到最终选择的数据, 还是取级联面板绑定的值,而不是select的值。

代码实现

template:

注意:
1,el-select组件中,必须要写入一个el-option组件, 可以隐藏, 但必须存在

2,选中的数据响应式绑定的其实是级联面板的数据,同步到了select中,并且满足其展示的内容,比如“已选中2项”

 <el-form-item><div class="theme-date theme"><div class="theme-date-prepend">功能模块</div><el-select v-model="selectModuleData"><el-option style="display: none" value=""></el-option><el-checkbox class="allselect" v-model="allSelectModule">全选</el-checkbox><el-cascader-panelref="cascaderModule":options="treeList"v-model="cascaderModuleData"popper-class="popper-select":show-all-levels="false":props="cascaderProp"clearable></el-cascader-panel></el-select></div></el-form-item>

script:

// data数据:
cascaderProp: {multiple: true,value: "name",label: "name",children: "children",},
allSelectModule: false,
cascaderModuleData: [],
selectModuleData: null,// watch
watch: {
// 监听多选按钮是否被勾选allSelectModule: {immediate: true,handler(newVal) {if (newVal) {/// 执行的方法,可以在下面的methods中寻找this.cascaderAllSelect();} else {if(!this.$refs.cascaderModule) returnthis.$refs.cascaderModule.clearCheckedNodes();this.$refs.cascaderModule.checkedValue = []; // 清空选中值this.cascaderModuleData = [];this.$refs.cascaderModule.activePath = []; // 清除高亮this.$refs.cascaderModule.syncActivePath(); // 初始化(只展示一级节点)}},},// 监听级联面板绑定的数据去同步select的数据, 让其显示在选择框中cascaderModuleData: {immediate: true,handler(newVal) {if (newVal.length === 0) {this.selectModuleData = "";if(!this.$refs.cascaderModule) returnthis.$refs.cascaderModule.activePath = []; // 清除高亮this.$refs.cascaderModule.syncActivePath(); // 初始化(只展示一级节点)} else {this.selectModuleData = `已选${newVal.length}`;}},},},
/// methods
// 级联选择器全选, 其中moduleArray表示的是级联面板绑定的数据,表示如果此时没有全选的话那就将所有的数据,赋值到级联面板中,这样在显示中,就表示全选的状态。cascaderAllSelect() {if (this.cascaderModuleData.length !== this.moduleArray.length) {this.cascaderModuleData = this.moduleArray;}},
// 直接获取级联面板的数据cascaderModuleData, 作为参数提交即可

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

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

相关文章

网络核心知识点 - 网络通信技术 XHR(XMLHttpRequest) 和 Fetch

一、关于 AJAX&#xff08;一种思想和方法&#xff09; 浏览器本身就具备网络通信的能力&#xff0c;但在早期&#xff0c;浏览器并没有把这个能力开放给JS。最早是微软在IE浏览器中把这一能力向JS开放&#xff0c;让JS可以在代码中实现发送请求&#xff0c;并不会刷新页面。Aj…

图论基础|695. 岛屿的最大面积、1020. 飞地的数量、130. 被围绕的区域

695. 岛屿的最大面积 力扣题目链接(opens new window) 给你一个大小为 m x n 的二进制矩阵 grid 。 岛屿 是由一些相邻的 1 (代表土地) 构成的组合&#xff0c;这里的「相邻」要求两个 1 必须在 水平或者竖直的四个方向上 相邻。你可以假设 grid 的四个边缘都被 0&#xff0…

解码新时代内存架构:探秘数据在内存中的灵动驻足

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 随着信息技术的飞速发展&#xff0c;我们身处一个数据爆炸的时代。数据的处理和存储方式正日益成为技术革新的重要领域。在新时代的…

AI程序员革命:探析Devin的登场与编程未来

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

BUG未解之谜01-指针引用之谜

在leetcode里面刷题出现的问题&#xff0c;当我在sortedArrayToBST里面给root赋予初始值NULL之后&#xff0c;问题得到解决&#xff01; 理论上root是未初始化的变量&#xff0c;然后我进入insert函数之后&#xff0c;root引用的内容也是未知值&#xff0c;因此无法给原来的二叉…

apifox创建接口含中文字符报错的两种解决方案

针对apifox的含中文报错解决方法&#xff1a; 方法一&#xff1a;创建相应接口后&#xff0c;在设置中URL自动编码为WHATING。 方法二&#xff1a;直接将浏览器的url复制到apifox中&#xff0c;浏览器会自动解析配置中文转换路径。

常见的OOM 问题的 6 种场景

今天跟大家一起聊聊线上服务出现 OOM 问题的 6 种场景,希望对你会有所帮助。 一、堆内存 OOM 堆内存 OOM 是最常见的 OOM 了。 出现堆内存 OOM 问题的异常信息如下: java.lang.OutOfMemoryError: Java heap space此 OOM 是由于 JVM 中 heap 的最大值,已经不能满足需求了…

一分钟学习Markdown语法

title: 一分钟学习Markdown语法 date: 2024/3/24 19:33:29 updated: 2024/3/24 19:33:29 tags: MD语法文本样式列表结构链接插入图片展示练习实践链接问题 欢迎来到Markdown语法的世界&#xff01;Markdown是一种简单而直观的标记语言&#xff0c;让文本排版变得轻松有趣。接下…

尝试Docker Dev Environments

无法从本地目录创建容器环境 创建的容器环境无法在VS Code打开 从官方仓库打开 结果vscode报错。fine&#xff0c;告辞。老老实实用本地环境开发。

IPV6协议之DHCPV6

目录 背景&#xff1a; 一、DHCPV6概述 DHCPv6 Client&#xff1a; DHCPv6 Relay&#xff1a; DHCPv6 Server&#xff1a; 二、DHCPV6工作原理 DHCPV6无状态自动分配 三、DHCP基础配置 服务端 四、DHCPV6地址更新时间&#xff08;DHCPV4租期&#xff09; 五、DHCPV6…

Ubuntu系统——操作PostgreSQL数据库

目录 一、安装PostgreSQL数据库 二、操作PostgreSQL数据库 1.设置PostgreSQL数据库用户密码 2.进入postgres用户 3.查看所有数据库——\l&#xff08;L的小写&#xff09; 4.创建数据库 5.删除数据库 6.查看版本号 7.授权远程登录 三、PostgresSQL数据库的数据类型 …

8年测试经验,自动化测试最容易犯的几个错误总结,一篇概全...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、自动化一切 我…