el-table的树形结构结合多选框使用,实现单选父子联动,全选,反选功能

<template><div><el-table:data="tableData":row-key="rowKey":default-expand-all="defaultExpandAll":tree-props="treeProps"><!-- 开启树形多选 --><el-table-column v-if="showSelection" width="120" align="left"><template #header><el-checkboxv-model="selectAll":checked="selectAll":indeterminate="isIndeterminate"@change="setCheckAll"/>{{ selectionName }}</template><template #default="scope"><el-checkboxv-model="scope.row[selectionConfig.checked]":checked="scope.row[selectionConfig.checked]":indeterminate="scope.row[selectionConfig.indeterminate]":disabled="scope.row[selectionConfig.disabled]"@change="setCheck(scope.row)"/></template></el-table-column><el-table-column prop="name" label="Name" width="180" /></el-table></div>
</template><script>
export default {props: {// 表格树形数据// 列配置项columnConfig: {type: Array,default: () => [{prop: 'default',label: '默认',width: '200',align: 'center',ownDefinedFn: () => {return '默认' // 可返回函数}}]},// 数据唯一标识rowKey: {type: String,default: 'id'},// 默认展开所有节点defaultExpandAll: {type: Boolean,default: true},// 渲染嵌套数据的配置选项treeProps: {type: Object,default: () => ({children: 'children'})},// 默认开启树形多选框showSelection: {type: Boolean,default: true},// 树形多选框标题selectionName: {type: String,default: ''},// 多选框配置selectionConfig: {type: Object,default: () => ({checked: 'checked',indeterminate: 'indeterminate',disabled: 'disabled'})}},data() {return {selectAll: false, // 全选isIndeterminate: false, // 半选tableData: [{id: '1',name: '目录1',parentId: '0',checked: false,isItemIndeterminate: false,children: [{id: '1-1-1-1',name: '目录1-1-1-1',parentId: '1',checked: false,isItemIndeterminate: false,children: []},{id: '1-1-1-2',name: '目录1-1-1-2',parentId: '1',checked: false,isItemIndeterminate: false,children: []}]},{ id: '2', name: '目录2', parentId: '0', checked: false, children: [] },{ id: '3', name: '目录3', parentId: '0', checked: false, children: [] },{ id: '4', name: '目录4', parentId: '0', checked: false, children: [] }]}},methods: {// 全选setCheckAll() {console.log(this.selectAll)this.tableData.forEach((item) => {if (!item[this.selectionConfig.disabled]) {item[this.selectionConfig.checked] = this.selectAll}this.setChildren(item, this.selectAll)})this.isIndeterminate = false},// 单选setCheck(row) {// 设置该单元格所有子节点状态this.setChildren(row, row[this.selectionConfig.checked])let result = this.setParentCheck(row)// 遍历到顶级,顶级无父节点,判断顶级节点是否都为选中if (!result) {let isAll = this.tableData.every((item) => {return item[this.selectionConfig.checked]})this.selectAll = isAllif (isAll) {this.isIndeterminate = false} else {let isIndeterminate = this.tableData.some((item) => {return item[this.selectionConfig.checked] || item[this.selectionConfig.indeterminate]})this.isIndeterminate = isIndeterminate}}},// 设置子节点setChildren(row, checked) {row[this.selectionConfig.indeterminate] = falseif (row[this.treeProps.children]) {row[this.treeProps.children].forEach((item) => {if (!item[this.selectionConfig.disabled]) {item[this.selectionConfig.checked] = checkeditem[this.selectionConfig.indeterminate] = false}if (row[this.treeProps.children]) {this.setChildren(item, checked)}})}},// 设置父节点setParentCheck(row) {// 寻找该行数据的父节点let parent = nullfor (let i = 0; i < this.tableData.length; i++) {parent = this.findItem(this.tableData[i], row.parentId)if (parent != null) {break}}// 遍历该行的父节点下,所有的子节点if (parent != null) {if (parent[this.treeProps.children]) {// 子节点是否全都选中,如果是则则勾选该节点let isAll = parent[this.treeProps.children].every((item) => {return item[this.selectionConfig.checked]})parent[this.selectionConfig.checked] = isAllif (isAll) {parent[this.selectionConfig.indeterminate] = false} else {let isIndeterminate = parent[this.treeProps.children].some((item) => {return item[this.selectionConfig.checked]})parent[this.selectionConfig.indeterminate] = isIndeterminate}// 递归查找该行父级的父级节点this.setParentCheck(parent, parent[this.selectionConfig.checked])}} else {// 遍历到顶级,停止return null}},// 查递归找该行的父节点findItem(row, id) {if (row.id == id) {return row}if (row[this.treeProps.children]) {let parent = nullfor (let i = 0; i < row[this.treeProps.children].length; i++) {parent = this.findItem(row[this.treeProps.children][i], id)if (parent) {break}}return parent} else {return null}}}
}
</script><style lang="less" scoped></style>

参考链接

https://blog.csdn.net/weixin_47342392/article/details/139168459

人工智能学习网站

https://chat.xutongbao.top

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

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

相关文章

[Matplotlib教程] 02 折线图、柱状图、散点图教程

基于MFCC和CNN的语音情感识别 2 折线图、柱状图、散点图2.1 折线图2.1.1 简单折线图2.1.1 线形和Markevery2.1.2 带误差棒的折线图2.1.3 区间填充和透明度 2.2 柱状图2.2.1 分组柱状图2.2.2 堆叠柱状图2.2.3 横向柱状图 2.3 散点图 我们的网站是 菜码编程&#xff0c;我们的q群…

Altium Designer(AD)百度云下载与安装(附安装步骤)

在我们日常使用当中&#xff0c;Altium designer常常也被简称为AD&#xff0c;是一款一体化的电子产品开发系统软件&#xff0c;主要运行在Windows操作系统上。 我们通过Altium designer把原理图设计、电路仿真、PCB绘制编辑、拓扑逻辑自动布线、信号完整性分析和设计输出等技…

毕业设计选题:基于ssm+vue+uniapp的捷邻小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…

多层感知机paddle

多层感知机——paddle部分 本文部分为paddle框架以及部分理论分析&#xff0c;torch框架对应代码可见多层感知机 import paddle print("paddle version:",paddle.__version__)paddle version: 2.6.1多层感知机&#xff08;MLP&#xff0c;也称为神经网络&#xff0…

web基础—dvwa靶场(十)XSS

XSS(DOM) 跨站点脚本&#xff08;XSS&#xff09;攻击是一种注入攻击&#xff0c;恶意脚本会被注入到可信的网站中。当攻击者使用 web 应用程序将恶意代码&#xff08;通常以浏览器端脚本的形式&#xff09;发送给其他最终用户时&#xff0c;就会发生 XSS 攻击。允许这些攻击成…

【3D打印】使用simplify 3D切片更改Gcode手动断电续打、掉电、未打完继续打印、补救

一、问题描述 有些时候会遇到3D打印机没料但机器还在继续打、掉电重启后未正常恢复打印、挤出机端没有料但断料检测未触发等情况。我们又不想打印放弃&#xff0c;但又想继续之前的进度打印。 这时候我们需要更改3D打印文件的Gcode参数来进行继续打印。 至于什么是Gcode&…

SQL - 基础语法

SQL作为一种操作命令集, 以其丰富的功能受到业内人士的广泛欢迎, 成为提升数据库操作效率的保障。SQL Server数据库的应用&#xff0c;能够有效提升数据请求与返回的速度&#xff0c;有效应对复杂任务的处理&#xff0c;是提升工作效率的关键。 由于SQL Servers数据库管理系统…

【秋招笔试-支持在线评测】8.28华为秋招(已改编)-三语言题解

🍭 大家好这里是 春秋招笔试突围,一起备战大厂笔试 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 | 大厂实习经历 ✨ 本系列打算持续跟新 春秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 华为专栏传送🚪 -> 🧷华为春秋招笔试 目前今年秋招的笔…

一文彻底搞懂大模型 - OpenAI o1(最强推理模型)

最近这一两周看到不少互联网公司都已经开始秋招提前批面试了。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c;帮助一些…

数据清洗-缺失值填充-K-NN算法(K-Nearest Neighbors, K-NN算法)

目录 一、安装所需的python包二、采用K-NN算法进行缺失值填充2.1代码&#xff08;完整代码关注底部微信公众号获取&#xff09;2.2以某个缺失值数据进行实战2.2.1代码运行过程截屏&#xff1a;2.2.2填充后的数据截屏&#xff1a; 三、K 近邻算法 (K-Nearest Neighbors, KNN) 介…

Docker 华为云镜像加速器配置

​​ 操作说明 1. 安装/升级容器引擎客户端 推荐安装1.11.2以上版本的容器引擎客户端 2. 加速器地址 访问华为云容器镜像服务&#xff1a;https://console.huaweicloud.com/swr/ 获取加速器地址 https://xxxxxxxxx.mirror.swr.myhuaweicloud.com3. 配置镜像加速器 针对…

音频左右声道数据传输_2024年9月6日

如下为音频数据传输标准I2S总线的基本时序图 I2S slave将I2S master发送来的左右声道的串行数据DATA转变为16bit的并行数据 WS为左右声道选择信号&#xff0c;WS高代表左声道&#xff0c;WS低代表右声道; WS为高和为低都持续18个周期&#xff0c;前面16个周期用来传输数据。 I2…

2024年华为杯数学建模研赛(C题) 建模解析| 磁芯损耗建模 | 小鹿学长带队指引全代码文章与思路

我是鹿鹿学长&#xff0c;就读于上海交通大学&#xff0c;截至目前已经帮2000人完成了建模与思路的构建的处理了&#xff5e; 本篇文章是鹿鹿学长经过深度思考&#xff0c;独辟蹊径&#xff0c;实现综合建模。独创复杂系统视角&#xff0c;帮助你解决研赛的难关呀。 完整内容可…

python-SZ斐波那契数列/更相减损数

一&#xff1a;SZ斐波那契数列题目描述 你应该很熟悉斐波那契数列&#xff0c;不是吗&#xff1f;现在小理不知在哪里搞了个山寨版斐波拉契数列&#xff0c;如下公式&#xff1a; F(n) { $\ \ \ \ \ \ \ \ \ \ \ \ $ a,( n1) $\ \ \ \ \ \ \ \ \ \ \ \ $ b,( n2) $\ \ \ \ \ \ …

STM32 通过 SPI 驱动 W25Q128

目录 一、STM32 SPI 框图1、通讯引脚2、时钟控制3、数据控制逻辑4、整体控制逻辑5、主模式收发流程及事件说明如下&#xff1a; 二、程序编写1、SPI 初始化2、W25Q128 驱动代码2.1 读写厂商 ID 和设备 ID2.2 读数据2.3 写使能/写禁止2.4 读/写状态寄存器2.5 擦除扇区2.6 擦除整…

React组件如何暴露自身的方法

一、研究背景 最近遇到一个如何暴露React组件自身方法的问题。在某些时候&#xff0c;我们需要调用某个组件内部的方法以实现某个功能&#xff0c;因此我们需要了解如何暴露组件内部API的方法。 二、实践过程 本文主要介绍React组件暴露子组件API的方法&#xff0c;以下是实…

C++【类和对象】(一)

文章目录 前言1.类的定义1.1类定义格式1.2 访问限定符1.3 类域 2. 实例化2.1 实例化的概念2.2 对象大小 3.this指针结语 前言 在前文我们讲解了C基础语法知识。本文将会讲解C的类和对象。 1.类的定义 1.1类定义格式 class name {}&#xff1b;class为定义类的关键字&#x…

计算机网络传输层---课后综合题

线路&#xff1a;TCP报文下放到物理层传输。 TCP报文段中&#xff0c;“序号”长度为32bit&#xff0c;为了让序列号不会循环&#xff0c;则最多能传输2^32B的数据&#xff0c;则最多能传输&#xff1a;2^32/1500B个报文 结果&#xff1a; 吞吐率一个周期内传输的数据/周期时间…

网络协议全景:Linux环境下的TCP/IP、UDP

目录 1.UDP协议解析1.1.定义1.2.UDP报头1.3.特点1.4.缓冲区 2.TCP协议解析2.1.定义2.2.报头解析2.2.1.首部长度&#xff08;4位&#xff09;2.2.2.窗口大小2.2.3.确认应答机制2.2.4.6个标志位 2.3.超时重传机制2.4.三次握手四次挥手2.4.1.全/半连接队列2.4.2.listen2.4.3.TIME_…

加速开发体验:为 Android Studio 设置国内镜像源

Android Studio 是由 JetBrains 开发的一个官方 IDE&#xff0c;用于 Android 应用开发。由于网络原因&#xff0c;直接从 Google 的服务器下载可能会比较慢或者不稳定。幸运的是&#xff0c;我们可以通过配置国内镜像源来加速下载和更新。 文章目录 &#x1f4af; 修改 Gradle…