Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点

使用Element的组件Table表格,当使用树形数据再配合上多选框,如下:

 会出现一种问题,点击左上方全选,只能够选中一级树节点,子节点无法被选中,如图所示:

想要实现点击全选就选中所有的表格,要另想办法,方法如下:
1、首先给table设置一个ref
2、绑定一个@select-all方法;

 3、定义一个变量,来识别全选框是否被选中,默认为未被选中;

checkedKeys: false,

 4、@select-all绑定的方法如下,Element的Table表格中,select-all表示当用户手动勾选全选 Checkbox 时触发的事件 ,每次点击,checkedKeys就取反,对表格数据进行foreach循环,使多选框选中/取消选中的关键代码为:

 this.$refs.multipleTable.toggleRowSelection(row, flag);

flag=true多选框选中,flag=false取消选中
该方法不会影响@selection-change绑定的方法,若状态为全选,可以拿到全选的数据。

代码截图如下:

全部代码如下:

<template><div><h1>树型数据+表格</h1><el-table :data="tableData" style="width:80%;margin: 100px;" row-key="id" border default-expand-all@select-all="selectAll" ref="multipleTable" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="date" label="日期" sortable width="180"></el-table-column><el-table-column prop="name" label="姓名" sortable width="180"></el-table-column><el-table-column prop="address" label="地址" width="380"></el-table-column></el-table></div>
</template>
<script>
export default {nama: "Tree",data() {return {checkedKeys: false,tableData: [{id: 1,date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",children: [],},{id: 2,date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{id: 3,date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",children: [{id: 31,date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{id: 3531,date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{id: 8931,date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{id: 32,date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",children: [{id: 61,date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{id: 42,date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",children: [{id: 321,date: "2016-05-01",name: "王小虎33333",address: "上海市普陀区金沙江路 1519 弄",},],},],},],},{id: 4,date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},methods: {selectAll() {this.checkedKeys = !this.checkedKeys;this.splite(this.tableData, this.checkedKeys);},/*** 处理数据*/splite(data, flag) {data.forEach((row) => {this.$refs.multipleTable.toggleRowSelection(row, flag);if (row.children != undefined) {this.splite(row.children);}});},handleSelectionChange(val){console.log(val);}}
};
</script>

上述方法只能用全选,选父级的话子级是不会选中的

下面这个方法,是选择父级子级可以选中,但是全选不能用

<template><div><el-tablev-if="deptList.length > 0"v-loading="loading":data="deptList"row-key="id":default-expand-all="isExpandAll":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"@select-all="selectAll"ref="multipleTable"@selection-change="handleSelectionChange"><el-table-column type="selection" :selectable="row => !row.disabled"><template slot-scope="scope"><el-checkbox v-model="scope.row.selected" @change="onRowSelectChange(scope.row)"></el-checkbox></template></el-table-column><!-- 其他列定义 --></el-table></div>
</template><script>
export default {data() {return {deptList: [],loading: false,isExpandAll: false,checkedKeys: false};},methods: {selectAll() {this.checkedKeys = !this.checkedKeys;this.splite(this.deptList, this.checkedKeys);},splite(data, flag) {data.forEach((row) => {this.$refs.multipleTable.toggleRowSelection(row, flag);if (row.children && row.children.length) {this.splite(row.children, flag);}});},onRowSelectChange(row) {if (row.children && row.children.length > 0) {this.traverse(row.children, row.selected);}},traverse(data, checked) {data.forEach((row) => {this.$set(row, 'selected', checked);if (row.children && row.children.length > 0) {this.traverse(row.children, checked);}});},// 其他方法}
};
</script>

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

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

相关文章

嵌入式学习之linux

今天&#xff0c;主要对linux文件操作原理进行了学习&#xff0c;主要学习的内容就是对linux文件操作原理进行理解。写的代码如下&#xff1a;

CSS3盒模型+flex

1.盒模型 标准盒模型: wwidthpaddingborderhheightpaddingborder 怪异盒模型(ie盒模型) wwidth包含了(paddingborder)hheight包含了(paddingborder) 2.CSS3弹性盒(重点新版弹性盒) 弹性盒: 设置为弹性盒后,父元素为容器,子元素为项目弹性盒中存在两根轴,默认水平为主轴,垂…

成集云 | 畅捷通T+cloud连接器自动同步财务费用单至畅捷通 | 解决方案

源系统成集云目标系统 方案介绍 财务管理作为企业管理中重要的组成部分&#xff0c;在企业的发展和成长中扮演着重要角色&#xff0c;成集云以钉钉费用单OA审批与畅捷通TCloud系统为例&#xff0c;与钉钉连接器深度融合&#xff0c;通过数据处理和字段匹配实现了费用…

6.oracle中listagg函数使用

1. 作用 可以实现行转列&#xff0c;将多列数据聚合为一列&#xff0c;实现数据的压缩 2. 语法 listagg(measure_expr&#xff0c;delimiter) within group ( order by order_by_clause); 解释&#xff1a; measure_expr可以是基于任何列的表达式 delimiter分隔符&#xff0c…

线性代数的学习和整理8:行列式相关

目录 1 从2元一次方程组求解说起 1.1 直接用方程组消元法求解 1.2 有没有其他方法呢&#xff1f;有&#xff1a;比如2阶行列式方法 1.3 3阶行列式 2 行列式的定义 2.1 矩阵里的方阵 2.2 行列式定义&#xff1a;返回值为标量的一个函数 2.3 行列式的计算公式 2.4 克拉…

打印所有声母,韵母组合汉语拼音并显示到表格中

最近辅导孩子学习语文&#xff1a;声母&#xff0c;韵母。现在将其组合起来。打印所有拼音集合 以下是整理出的有关拼音的内容。 声母&#xff08;23个&#xff09;&#xff1a; b、p、m、f、d、t、n、l、g、k、h、j、q、x、zh、ch、sh、r、z、c、s、y、w。 韵母&#xff0…

《华为认证》交换堆叠介绍

定义 堆叠是指将多台支持堆叠特性的交换机通过堆叠线缆连接在一起&#xff0c;从逻辑上变成一台交换设备&#xff0c;作为一个整体参与数据转发。如图1所示&#xff0c;SwitchA与SwitchB通过堆叠线缆连接后组成堆叠系统。 图1 堆叠示意图 应用场景 提高可靠性 堆叠系统多台成…

python连接PostgreSQL 数据库

执行如下命令安装 pip3 install psycopg2 python代码 Author: tkhywang 2810248865qq.com Date: 2023-08-21 11:42:17 LastEditors: tkhywang 2810248865qq.com LastEditTime: 2023-08-21 11:51:56 FilePath: \PythonProject02\PostgreSQL 数据库.py Description: 这是默认设置…

用户端Web自动化测试_L3

目录&#xff1a; 浏览器复用Cookie 复用pageobject设计模式异常自动截图测试用例流程设计电子商务产品实战 1.浏览器复用 复用浏览器简介 为什么要学习复用浏览器&#xff1f; 自动化测试过程中&#xff0c;存在人为介入场景提高调试UI自动化测试脚本效率 复用已有浏览…

docker的资源控制及docker数据管理

文章目录 docker的资源控制及docker数据管理一.docker的资源控制1.CPU 资源控制1.1 资源控制工具1.2 cgroups有四大功能1.3 设置CPU使用率上限1.4 进行CPU压力测试1.5 设置50%的比例分配CPU使用时间上限1.6 设置CPU资源占用比&#xff08;设置多个容器时才有效&#xff09;1.6.…

Docker常用操作命令(二)

Docker常用操作命令(二) 11、进入容器 docker exec -it 容器名称or容器ID /bin/bash [rootzch01 ~]# docker exec -it 973ff3caff19 /bin/bash 退出容器 root973ff3caff19:/# exit 12、查看容器中的进程 docker top 容器名称or容器ID [rootzch01 ~]# docker top 973ff3c…

概率密度函数 累积分布函数

概率密度函数&#xff1a;是指想要求得面积的图形表达式&#xff0c;注意只是表达式&#xff0c;要乘上区间才是概率&#xff0c;所以概率密度并不是概率&#xff0c;而是概率的分布程度。 为什么要引入概率密度&#xff0c;可能是因为连续变量&#xff0c;无法求出某个变量的…

async/await 编程理解

博客主要是参考 Asynchronous Programming in Rust &#xff0c;会结合简单的例子&#xff0c;对 async 和 await 做比较系统的理解&#xff0c;如何使用 async 和 await 是本节的重点。 async 和 await 主要用来写异步代码&#xff0c;async 声明的代码块实现了 Future 特性&a…

java八股文面试[JVM]——元空间

JAVA8为什么要增加元空间 为什么要移除永久代&#xff1f; 知识来源&#xff1a; 【2023年面试】JVM8为什么要增加元空间_哔哩哔哩_bilibili

图论基础和表示(Java 实例代码)

目录 图论基础和表示 一、概念及其介绍 二、适用说明 三、图的表达形式 Java 实例代码 src/runoob/graph/DenseGraph.java 文件代码&#xff1a; src/runoob/graph/SparseGraph.java 文件代码&#xff1a; 图论基础和表示 一、概念及其介绍 图论(Graph Theory)是离散数…

【Rust】Rust学习 第十八章模式用来匹配值的结构

模式是 Rust 中特殊的语法&#xff0c;它用来匹配类型中的结构&#xff0c;无论类型是简单还是复杂。结合使用模式和 match 表达式以及其他结构可以提供更多对程序控制流的支配权。模式由如下一些内容组合而成&#xff1a; 字面值解构的数组、枚举、结构体或者元组变量通配符占…

3D角色展示

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>3D卡片悬停</title><style>font-face {font-family: "Exoct";src: url("htt…

深度学习模型优化:提高训练效率和精度的技巧

文章目录 1. 数据预处理2. 批量归一化&#xff08;Batch Normalization&#xff09;3. 学习率调整4. 提前停止&#xff08;Early Stopping&#xff09;5. 模型压缩与剪枝6. 模型并行与分布式训练7. 自动化超参数调整结论 &#x1f389;欢迎来到AIGC人工智能专栏~探索Java中的静…

记录《现有docker中安装spark3.4.1》

基础docker环境中存储hadoop3--方便后续查看 参考&#xff1a; 实践&#xff1a; export JAVA_HOME/opt/apache/jdk1.8.0_333 export SPARK_MASTER_IP192.168.0.220 export SPARK_WORKER_MEMORY4g export SPARK_WORKER_CORES2 export SPARK_EXECUTOR_MEMORY4g export HADOOP_H…

windows环境 pip安装mysqlclient失败问题记录及解决方案

1.问题记录 > pip install -i https://pypi.douban.com/simple mysqlclient Looking in indexes: https://pypi.douban.com/simple Collecting mysqlclientUsing cached https://pypi.doubanio.com/packages/50/5f/eac919b88b9df39bbe4a855f136d58f80d191cfea34a3dcf96bf5d…