如何实现表格选中时禁用树结构的复选框功能(El-Tree 与 El-Table 联动实现)
在前端开发中,树形结构和表格是常用的组件组合,尤其是在展示和管理复杂数据时。使用 Element UI 的 el-tree 和 el-table 组件,我们可以实现当表格中有选中行时,自动禁用树结构中的复选框,反之亦然。这不仅提升了用户体验,还能有效防止数据操作上的冲突。本文将详细介绍如何实现这一功能,并提供相应的代码示例。
实现思路
- 树结构 (
el-tree):用于展示分层数据,支持复选框选择。 - 表格 (
el-table):用于展示详细数据,支持多选行。 - 联动机制:
- 当表格中有选中行时,禁用树结构中的所有复选框。
- 当表格中没有选中行时,启用树结构中的复选框。
代码实现
以下是实现上述功能的关键代码片段。注意,代码部分保持原样,未作修改,仅在说明中进行了润色和解释。
树结构组件
<el-treeref="tree":data="treeData":props="defaultProps"node-key="id"show-checkbox:filter-node-method="filterNode"draggable:current-node-key="parentId"highlight-current:expand-on-click-node="false":auto-expand-parent="false":default-expanded-keys="twoKeys"@node-click="handleNodeClick"@node-expand="handleNodeExpand"@node-collapse="handleNodeCollapse"
/>
表格组件
<!-- 表格代码是封装之后,请注意你们的代码不能直接复制 -->
<common-table:dict="dict.type":columns="columns":dataSource="dataSource":ipagination="ipagination"@queryTable="loadData"@selection-change="handleSelectionChange"@sort-change="handleSortChange"
><template slot="left"><el-table-column type="selection" width="55" align="center" :selectable="selectable"/><el-table-column label="序号" align="center" width="60" type="index" :index="indexMethod"/></template>
</common-table>
Vue 数据与方法
data: function () {return {defaultProps: {children: "children",disabled: (data) => this.isNodeDisabled(data), // 动态禁用label: (data) => (data.label ? data.label : "") + " " + (data.materialCount ? data.materialCount : "")},multipleSelection: [] // 存储表格中选中的行}
},
methods: {
// 判断节点是否需要禁用
isNodeDisabled(data) {return this.multipleSelection.length > 0; // 如果表格有选中,则禁用树节点
},// 表格复选框是否禁用
selectable() {return this.$refs.tree.getCheckedNodes().length === 0;
},/** 列表多选 */
handleSelectionChange(selection) {this.multipleSelection = selection;// 创建新对象以触发响应式更新this.defaultProps = {...this.defaultProps, // 保留其余属性disabled: (data) => this.isNodeDisabled(data) // 动态赋值函数};// 如果树组件依然没有响应,可以使用 Vue 的 $forceUpdate() 强制整个组件重新渲染。// this.$forceUpdate(); // 强制更新视图
},
}
详细说明
1. 树结构 (el-tree)
- 属性解释:
ref="tree":为树组件设置引用,方便在其他地方调用其方法。:data="treeData":绑定树的数据源。:props="defaultProps":配置树节点的属性,包括标签、子节点等。show-checkbox:显示复选框。- 其他属性如
draggable、highlight-current等用于增强树的交互性。
2. 表格组件 (common-table)
- 说明:此处使用了封装后的
common-table组件,需根据实际情况进行调整,避免直接复制代码。 - 关键点:
@selection-change="handleSelectionChange":监听表格中选中行的变化,以便联动禁用树节点。
3. 数据与方法
-
defaultProps:children:定义子节点的属性名称。disabled:动态设置节点是否禁用,依据isNodeDisabled方法。label:定义节点的显示标签,包含名称和物料数量。
-
isNodeDisabled方法:- 判断表格中是否有选中行,如果有,则禁用树节点的复选框。
-
selectable方法:- 判断树中是否有选中的节点,如果没有,则允许表格中的复选框可选。
-
handleSelectionChange方法:- 更新
multipleSelection数组,存储当前表格中选中的行。 - 重新赋值
defaultProps,触发树组件的响应式更新,使复选框状态根据表格选择动态改变。 - 如果树组件未及时更新,可以使用
this.$forceUpdate()强制重新渲染组件。
- 更新
使用效果
通过上述配置,当用户在表格中选中一行数据时,树结构中的所有复选框将被禁用,防止用户在树和表格之间同时进行选择操作。反之,当表格中没有选中行时,树结构的复选框将恢复可用状态,允许用户进行选择。
结语
通过这篇笔记,你应该已经了解了如何实现表格选中和树节点联动的功能。核心在于动态绑定 disabled 和 selectable 属性的逻辑,通过 Vue 的数据响应式机制,可以轻松实现像 el-tree 和 el-table 这样的复杂组件间的交互。
这种实现方式不仅适用于 el-tree 和 el-table 的联动,还可以拓展到其他需要组件联动的场景,为你的项目增添便利和灵活性!如果你还有其他类似需求,欢迎留言交流 😊
相关文章:
如何实现表格选中时禁用树结构的复选框功能(El-Tree 与 El-Table 联动实现)
在前端开发中,树形结构和表格是常用的组件组合,尤其是在展示和管理复杂数据时。使用 Element UI 的 el-tree 和 el-table 组件,我们可以实现当表格中有选中行时,自动禁用树结构中的复选框,反之亦然。这不仅提升了用户体…...
STM32CUBEIDE FreeRTOS操作教程(十):interrupt on/off中断开关
STM32CUBEIDE FreeRTOS操作教程(十):interrupt on/off中断开关 STM32CUBE开发环境集成了STM32 HAL库进行FreeRTOS配置和开发的组件,不需要用户自己进行FreeRTOS的移植。这里介绍最简化的用户操作类应用教程。以STM32F401RCT6开发…...
Linux的基本操作及虚拟机设置
文章目录 Linux的目录结构Linux中的常见目录 VI和VIM编辑器什么是VI和VIM编辑器VIM的一般模式VIM的编辑模式VIM的命令模式模式间的切换 虚拟机网络配置查看网络信息修改网络配置信息查看和修改主机名服务管理类命令 虚拟机管理操作VMware为虚拟机拍摄快照VMware为虚拟机执行克隆…...
oracle 用户手册
Oracle用户手册 一、Oracle数据库概述 定义与用途 Oracle数据库是一款功能强大的关系型数据库管理系统(RDBMS)。它用于存储和管理大量的结构化数据,广泛应用于企业级应用、金融系统、电商平台等各种需要高效数据处理和存储的场景。例如,银行使用Oracle数据库来存储客户账户…...
Flutter-Web打包后上线白屏
问题描述 Flutter上线后进行测试发现界面白屏,打开开发者模式查看网络发现加载main.js文件404 问题原因 我上线的地址是https://xxx:8091/homedots,但是我打包后的index文件中的baseUrl是"/",将地址改成”/homedots/",注意homedots后面…...
解决linux访问huggingface的问题(操作记录)
目录 一、clash软件(linux)的下载 二、clash软件(linux)的使用 三、linux命令行访问huggingface 1、问题分析 2、设置命令行代理 四、补充(windows的linux虚拟机) 五、参考链接 一、clash软件&#…...
Android Studio 右侧Gradle窗口只有test的task问题解决
目录 运行环境问题现象解决方案1、打开Settings设置界面2、设置选项3、重启Android Studio4、重新Sync工程 运行环境 Android Studio Giraffe | 2022.3.1 Patch 3 Android SDK 33 Gradle 8.0.1 JDK 17 问题现象 Android Studio右侧Gradle窗口下只有test的task,其他…...
Spring AOP 的实现和切点表达式的介绍
1. 快速入手 AOP:就是面相切面编程,切面指的就是某一类特定的问题,也可以理解为面相特定方法编程,例如之前使用的拦截器,就是 AOP 思想的一种应用,统一数据返回格式和统一异常处理也是 AOP 思想的实现方式…...
【赛博保安】安全日记之常用术语(一)
"企业的信息安全治理水平,直接取决于安全团队人员的技术专业度,而非运营经验值。所谓的技术,并非指渗透和挖洞的能力,而是指软件开发、IT 架构、网络拓扑相关的知识和经验。 站在乙方的角度来看,技术薄弱的安全人…...
C++ 中的 string 类:全面解析与应用实践(上)
🤖🌟 欢迎降临张有志的未来科技实验室🤖🌟 专栏:C 👨💻👩💻 先赞后看,已成习惯👨💻👩💻…...
量化交易系统开发-实时行情自动化交易-8.7.文华平台
19年创业做过一年的量化交易但没有成功,作为交易系统的开发人员积累了一些经验,最近想重新研究交易系统,一边整理一边写出来一些思考供大家参考,也希望跟做量化的朋友有更多的交流和合作。 接下来会对于文华平台介绍。 文华财经…...
美畅物联丨如何通过 FFmpeg 解码视频
FFmpeg是一款功能强大、在多媒体处理领域广泛应用的开源工具。它可以处理多种音频和视频格式,包含编码、解码、转码、流媒体处理等众多功能。前两天,我们在《美畅物联丨如何通过FFmpeg排查视频问题》一文中介绍了借助FFmpeg程序来辅助判断视频播放异常的…...
机器学习任务功略
loss如果大,训练资料没有学好,此时有两个可能: 1.model bias太过简单(找不到loss低的function)。 解决办法:增加输入的feacture,设一个更大的model,也可以用deep learning增加弹性…...
Web Worker 和 WebSocket的区别
Web Worker(消息传递机制) 定义:是为了在浏览器中提供多线程支持,允许 JavaScript 在后台线程运行,而不阻塞主线程。它非常适合执行耗时的计算任务或处理大量数据,避免主线程(通常是 UI 线程&a…...
JMeter实时性能压测可视化系统整合
一、相关工具简介: JMeter、Grafana 和 InfluxDB 结合实时地收集、分析和展示性能测试数据,进行更好地理解系统的性能表现,及时发现潜在问题并进行优化。 1,JMeter 实时生成性能数据,并将其发送到 InfluxDB 进行存储。2,InfluxDB 存储的数据。3,通过Grafana的仪表板,用…...
无限加载和懒加载及路由滚动及路由滚动不生效
这里写目录标题 列表无限加载懒加载定制路由滚动使用scrollBehavior不起效不管用的原因使用scrollTo来实现路由滚动elMain && elMain.scrollTo(...) 的作用是: 无限加载和懒加载的区别 列表无限加载 无限加载功能在现代网页和移动应用中广泛应用࿰…...
CSS底层基础:小白速来
1. CSS简介 CSS (Cascading Style Sheets) 是一种用来描述HTML或XML文档样式的语言。它使得开发者能够控制网页的布局和外观,包括字体、颜色、间距等。CSS通过选择器来指定要应用样式的元素,并定义这些元素的具体样式属性。 基本结构示例: …...
【MySQL 进阶之路】索引概述
第06章_索引 1.什么是索引 索引是存储引擎用于快速找到数据记录的一种数据结构,就好比一本教科书的目录部分,通过目录中找到对应文章的页码,便可快速定位到需要的文章。MySQL中也是一样的道理,进行数据查找时,首先查…...
【C++boost::asio网络编程】有关异步读写api的笔记
异步读写api 异步写操作async_write_someasync_send 异步读操作async_read_someasync_receive 定义一个Session类,主要是为了服务端专门为客户端服务创建的管理类 class Session { public:Session(std::shared_ptr<asio::ip::tcp::socket> socket);void Conn…...
Elasticsearch 的存储与查询
Elasticsearch 的存储与查询 在搜索系统领域,数据的存储与查询是两个最基础且至关重要的环节。Elasticsearch(ES) 在这两方面进行了深度优化,使其在关系型数据库或非关系型数据库中脱颖而出,成为搜索系统的首选。 映射 (Mapping) 映射 (Ma…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
【HTTP三个基础问题】
面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关
在水泥厂的生产流程中,工业自动化网关起着至关重要的作用,尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关,为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多,其中不少设备采用Devicenet协议。Devicen…...
