如何实现表格选中时禁用树结构的复选框功能(El-Tree 与 El-Table 联动实现)

在前端开发中,树形结构和表格是常用的组件组合,尤其是在展示和管理复杂数据时。使用 Element UI 的 el-treeel-table 组件,我们可以实现当表格中有选中行时,自动禁用树结构中的复选框,反之亦然。这不仅提升了用户体验,还能有效防止数据操作上的冲突。本文将详细介绍如何实现这一功能,并提供相应的代码示例。

实现思路

  1. 树结构 (el-tree):用于展示分层数据,支持复选框选择。
  2. 表格 (el-table):用于展示详细数据,支持多选行。
  3. 联动机制
    • 当表格中有选中行时,禁用树结构中的所有复选框。
    • 当表格中没有选中行时,启用树结构中的复选框。

代码实现

以下是实现上述功能的关键代码片段。注意,代码部分保持原样,未作修改,仅在说明中进行了润色和解释。

树结构组件

<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:显示复选框。
    • 其他属性如 draggablehighlight-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-treeel-table 这样的复杂组件间的交互。

这种实现方式不仅适用于 el-treeel-table 的联动,还可以拓展到其他需要组件联动的场景,为你的项目增添便利和灵活性!如果你还有其他类似需求,欢迎留言交流 😊

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

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

相关文章

决策树:ID3、C4.5和CART特征选择方式

1 前言 该文章主要目的是记录ID3、C4.5和CART特征选择方式&#xff0c;这里只对决策树进行简单介绍。 决策树&#xff08;Decision Tree&#xff09;算法是一种有监督学习算法&#xff0c;它利用分类的思想&#xff0c;根据数据的特征构建数学模型&#xff0c;从而达到数据的筛…

【3D AIGC】Img-to-3D、Text-to-3D、稀疏重建(2024年文章汇总)

文章目录 1. Wonderworld&#xff1a;拓展图片边界&#xff0c;生成3D场景2. 3DTopia-XL&#xff1a;扩散模型辅助生成3. 3DGS-Enhancer: 通过视图一致2D Diffusion&#xff0c;提升无界3D Gaussian Splatting (NlPs2024 Spotlight)4. L3DG&#xff1a;Latent 3D Gaussian Diff…

三款电容麦的对比

纸面参数 第一款麦克风 灵敏度: -36 dB 2 dB&#xff08;0 dB1V/Pa at 1 kHz&#xff09; 灵敏度较低&#xff0c;需要更高的增益来拾取同样的音量。频率响应: 40 Hz - 18 kHz 响应范围较窄&#xff0c;尤其在高频区域。等效噪音级: ≤18 dB&#xff08;A计权&#xff09; 噪…

运行 GreatSQL 时为什么要求关闭透明大页

在大部分运维规范中&#xff0c;一般都会要求在运行 GreatSQL/MySQL 的环境中要关闭透明大页&#xff0c;那么到底什么是透明大页&#xff0c;为什么要关闭&#xff0c;打开有什么风险吗&#xff1f; 在此之前&#xff0c;我也是有点懵的&#xff0c;本文试着回答这个疑问&…

JUnit介绍:单元测试

1、什么是单元测试 单元测试是针对最小的功能单元编写测试代码&#xff08;Java 程序最小的功能单元是方法&#xff09;单元测试就是针对单个Java方法的测试。 2、为什么要使用单元测试 确保单个方法运行正常&#xff1b; 如果修改了代码&#xff0c;只需要确保其对应的单元…

Elasticsearch:使用硬件加速的 SIMD 指令实现超快 BBQ

作者&#xff1a;来自 Elastic Chris Hegarty 我们如何使用硬件加速 SIMD&#xff08;Single Instruction Multiple Data - 单指令多数据&#xff09;指令优化 BBQ 中的向量比较。 随着我们继续致力于让 Elasticsearch 和 Apache Lucene 成为存储和搜索向量数据的最佳场所&…

青龙面板添加任务执行自己的脚本文件(非订阅) 保姆级图文

目录 效果预览脚本存放的位置创建任务cron规则字段含义&#xff1a;常见的特殊字符&#xff1a; 可能你的脚本需要安装依赖总结 欢迎关注 『青龙面板』 专栏&#xff0c;持续更新中 欢迎关注 『青龙面板』 专栏&#xff0c;持续更新中 效果预览 你的python脚本 print(123)运行…

flink的安装配置(详细版本)

Standalone集群模式安装部署 conda deactivate 退出 base环境 Flink支持多种安装模式。 local&#xff08;本地&#xff09;——本地模式 standalone——独立模式&#xff0c;Flink自带集群&#xff0c;开发测试环境使用 standaloneHA—独立集群高可用模式&#xff0c;Fli…

Scala编程基础:模式匹配、解构赋值与正则表达式

在Scala编程语言中&#xff0c;模式匹配、解构赋值和正则表达式是三个非常强大的特性&#xff0c;它们可以让我们以更简洁、更直观的方式处理数据。本文将通过三个示例&#xff0c;详细解释这些特性的使用方法和背后的原理。 1. 模式匹配与case class 模式匹配是Scala中处理数…

Linux Cgroup学习笔记

文章目录 Cgroup(Control Group)引言简介Cgroup v1通用接口文件blkio子系统cpu子系统cpuacct子系统cpuset子系统devices子系统freezer子系统hugetlb子系统memory子系统net_cls子系统net_prio子系统perf_event子系统pids子系统misc子系统 Cgroup V2基础操作组织进程和线程popula…

JVM, JRE 和 JDK

JRE: Java Runtime Environment, Java 运行环境. JDK: Java Development Kit, Java 开发工具包. JRE JVM 核心类库 运行工具 JDK JVM 核心类库 开发工具 JVM: Java Virtual Machine, Java 虚拟机. 核心类库: Java 已经写好的东西, 直接拿来用即可. 开发工具: 包括 …

一次完整的HTTP请求所经历几个步骤?

1. 用户输入 URL 或触发请求 当你在浏览器中输入一个 URL 或在应用程序中触发某个请求时&#xff0c;首先需要解析这个 URL&#xff0c;识别出协议、域名、路径等信息。 2. DNS 解析 计算机需要通过 域名系统&#xff08;DNS&#xff09; 将 URL 中的域名转换为 IP 地址。比…

用于LiDAR测量的1.58um单芯片MOPA(一)

--翻译自M. Faugeron、M. Krakowski1等人2014年的文章 1.简介 如今&#xff0c;人们对高功率半导体器件的兴趣日益浓厚&#xff0c;这些器件主要用于遥测、激光雷达系统或自由空间通信等应用。与固态激光器相比&#xff0c;半导体器件更紧凑且功耗更低&#xff0c;这在低功率供…

前端框架的选择与反思:在简约与复杂之间寻找平衡

在当今互联网时代&#xff0c;前端开发已经成为web应用构建中不可或缺的一环。从最初的静态HTML页面&#xff0c;到如今复杂的单页应用&#xff08;SPA&#xff09;&#xff0c;前端技术的发展让我们见证了Web应用的蓬勃发展。然而&#xff0c;伴随着技术的进步&#xff0c;一个…

推荐 编译器c++

网页型 https://www.acgo.cn/playground C 在线工具 | 菜鸟工具 AcWing - 在线题库 ZJYYC在线测评系统 少儿编程竞赛在线学习 登录 - JOYSKID 余博士教编程_酷哥OJ_酷哥爱编程_酷哥创客AI编程 登录 - Luogu Spilopelia 软件型 DEV-c Dev C软件下载

吴恩达:《State of AI report》展现2024的主要趋势和突破(二)

万字长文&#xff0c;2024AI行业的科研角力 ©作者|Zhongmei 来源|神州问学 前言 吴恩达的网站在十月中旬发表了一篇名为《A Year of Contending Forces》的文章&#xff0c;该文章是围绕着一个名为《State of AI Report - 2024》的年度报告的总结和点评。该报告由Nathan…

三维地图,智慧城市,商业智能BI,数据可视化大屏(Cesiumjs/UE)

绘图工具 三维地图&#xff1a;Cesiumjs 建模方式&#xff1a;激光点云建模、航拍倾斜摄影建模、GIS建模、BIM建模、手工建模 建模工具&#xff1a;C4D Blender GeoBuilding ArcGIS Cesiumjs <!DOCTYPE html> <html lang"en"> <head><meta …

【k8s 深入学习之 event 聚合】event count累记聚合(采用 Patch),Message 聚合形成聚合 event(采用Create)

参考 15.深入k8s:Event事件处理及其源码分析 - luozhiyun - 博客园event 模块总览 EventRecorder:是事件生成者,k8s组件通过调用它的方法来生成事件;EventBroadcaster:事件广播器,负责消费EventRecorder产生的事件,然后分发给broadcasterWatcher;broadcasterWatcher:用…

40分钟学 Go 语言高并发:分布式锁实现

分布式锁实现 一、概述 分布式锁是分布式系统中的一个重要组件&#xff0c;用于协调分布式环境下的资源访问和并发控制。我们将从锁设计、死锁预防、性能优化和容错处理四个维度深入学习。 学习目标 维度重点内容掌握程度锁设计基于Redis/etcd的锁实现原理必须掌握死锁预防…

今日分享开源酷炫大数据可视化大屏html模板

前言 虽然目前已有很多开源在线制作可视化大屏项目 但有时候为了项目赶工期上线&#xff0c;直接利用现成的可视化大屏html模板&#xff0c;配合开源低代码平台Microi吾码的接口引擎&#xff0c;半小时以内就能做一个成品 先上图 代码也非常简单&#xff0c;利用Microi吾码接口…