vue3 - elementPlus表格table树形结构复选框勾选父子联动示例，el-table树状表格tree复选框checkbox多选框全选/反选取消，children当子级全选中，父级自动勾选

已于 2025-01-16 14:53:21 修改
阅读量1w 收藏 5
点赞数 17
分类专栏： 前端组件与功能(开箱即用) Vue组件与功能(工作经验) vue常见问题解决 文章标签： vue3.js element plus 表格组件Table 表格tree加入checkbo el-tab表格复选框多选联动 树形表格如何父子勾选时联动子级 children多选表格多选框
于 2024-12-15 17:32:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/144489376
版权

效果图

在 vue3+element plus 项目中，实现el-table树形表格每行加入Checkbox多选框（树形表格+多选），Tree树状表格实现复选框多选效果，选中父节点同时勾选其所有子节点（点击某一行也可以进行勾选），elementPlus表格树形结构嵌套复选框全选全不选功能，子集没全选是父级不勾选子集全选后父级自动勾选，在header头部有一个全选/反选按钮，点击后选中全部表格列表或取消全部选择，并且表格行row与复选框全选之间相互联动，支持动态接口数据传入或懒加载数据、表格分页等！
，
提供详细示例代码，新手小白复制稍微改改就能用了。

在这里插入图片描述

完整源码

直接复制运行，根据自己的需求简单修改下！

了解本专栏 订阅专栏 解锁全文
vue2 - elementUI表格table树形结构复选框勾选父子联动示例，el-table树状表格tree复选框checkbox多选框全选/反选取消children（当子级全选中，父级自动勾选）
高级前端工程师
12-15 1万+
vue2，elementui，el-table树状表格多选，树形结构结合多选框使用，实现单选父子联动全选反选，勾选联动父级勾选，表格多选check父子联动，table表格children如何嵌入复选框，el-table使用多选框与树形数据写一个有半选全选功能的表格，el-table树形表格实现复选框多选效果，表格树状结构多选，每一个row都可以选中并且联动全选按钮，table选父带子选子带父，树形数据与懒加载，Table表格树形结构多选框选中父级时会选中子级，elementUI表格里树形结构嵌套复选框全选全
Vue3 - Element Plus 树形表格组件 el-table 一键全部展开折叠功能，支持动态数据及懒加载点击父级才去请求的场景，Tree树状表格每行带有children的表格全部收起和折叠！
王二红
08-07 5632
vue3，element-plus，表格Table组件，el-table，怎样一键展开/收起，一键展开或折叠树形表格，如何通过按钮来实现全部展开，不生效，一键折叠或展开表格，表格children嵌套，带有子集，多级表格，懒加载，动态数据，table表格的children通过后端请求过来的怎么一键展开请求数据呢，表格如何一键展开和折叠，怎么使用，教程，树形数据table全部展开和折叠，一键展开或折叠树形表格，点击展开接口获取数据，toggleRowExpansion，树形表格懒加载与全部折叠，深层多级，复杂，
vue+element UI实现树形表格带复选框的示例代码
10-17
主要介绍了vue+element UI实现树形表格带复选框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table复选框父子关联（联级）选择
m0_62317155的博客
09-14 1638
el-table复选框父子关联（联级）选择
Element-Plus的el-tree-select树形选择框联动ts版本
最新发布
weixin_50971607的博客
04-23 230
Element-Plus的el-tree-select树形选择框联动ts版本
解决 Vue3 + Element Plus 树形表格全选多选以及子节点勾选的问题
唐先森的博客
10-23 4188
最近用到了组件库的中的树形表格，但官网例子只能做到一层勾选，不能做到多层勾选，无法满足业务需求，所以研究了下，如何在子节点选满的情况下自动勾选上父节点？勾选父节点时自动勾上全部子节点？
el-table树形表格结构，勾选联动 父级勾选
HotGirlYmj的博客
06-24 701
el-table 树结构复选框，联动逻辑
Element-Plus的el-table表格树形结构多选框选中父级时会选中子级（递归多级）
m0_72640026的博客
05-11 1404
从树形element中（tree-table）表格上做的改变业务需求：需要一个对象对应一个或者多个模块最终效果。
在vue中使用elementUI的树形表格组件展示数据，且选择框实现父子联动
m0_61254384的博客
11-13 1199
树形表格中父子节点联动选择
Vue3用el-table写树状表格遇到的问题（搜索时：行样式变更 以及 对应父节点展开）
weixin_50245419的博客
11-01 928
用el-table写树状表格时要求实现：搜索时，行样式变更 以及 对应父节点展开
element-plus 树状表格 复选框勾选问题
weixin_45695727的博客
07-14 3950
最近项目需要用到树形表格，咱们公司用的是 elment-plus 这个ui库暂时还不成熟，有好多bug，需要自己处理 注意的地方 *1，树状表格的节点都需要自己手动设置，调用 elemet-plus库抛出的方法toggleRowSelection； *2. 表格里数据在显示的时候不能变动，不然就会出现问题，所以在此之间不能去更改每一行数据的值； *3. 表格没有暴露出来半选状态的方法，需要自己去设置； 思路 *（1）上面说了，表格没有暴露出来半选状态的方法，所以我们要通过设置类名的方法自己设置，咱们需
element+plus级联表格父级子级选择
Auaaa的博客
02-16 2506
使用this.$refs.selectTable.toggleRowSelection(j, true);去勾选父级时，会将子级即子级以下的全部勾选；但是我想要的只是勾选父级，但是又不想去除勾选父级时，勾选子级的功能！解决思路，勾选父级时现将父级以下的全部子级取消勾选，再将原本勾选了的一个一个勾选！
vue3+element-plus table 实现树状结构数据递归向上选择
weixin_43828003的博客
02-02 769
效果如下 element-plus默认只允许选择父级默认选中子级，选中子级不会选中父级，需要自己处理 代码 HTML部分 <el-table :data="moduleInfo" row-key="id" border default-expand-all class="table-style" ref="moduleTableRef" @select="handleSelectionMenuChange"
el-table的树形结构结合多选框使用，实现单选父子联动，全选，反选功能
weixin_47342392的博客
05-24 2408
点击全选按钮，选中全部；点击父节点需选中其所有子节点，点击子节点需反选其父节点。
vue3中渲染纵向表头的树形动态表格的解决方案
gy1390751169的博客
04-25 1335
注意：由于我们是递归组件渲染表格，因此应该让父容器被子元素自动撑开，所以给所有父容器加入overflow:auto属性，否则渲染完成后加入边框div之间会有很难看的缝隙！
Vue实战（三）：实现树形表格
阿标的博客
03-21 1965
实现树形表格
vue3+element-puls 自定义TreeSelect 树形选择多选
Jie0817的博客
06-30 4994
vue3+element-puls 自定义TreeSelect 树形选择
el-table树形复选框（通用组件）
不会游泳的鱼的博客
03-26 4180
使用方法（将这个注册为组件再使用） 根据element 的 el-table 组件再次封装 <TableTrees ref="tabTree" :check-list="tableList" :tree-data="treeData" :parent-key="'parentId'" :tree-props="treeProps" :data-column="dataColumn" :ro...
taro小程序 Vue3 递归实现动态树形表格
weixin_47432301的博客
01-05 904
taro vue3 树形表格
vant创建一个树选择父级时默认勾选父级下的子级
03-31
可以使用vant的TreeSelect组件，在设置v-model绑定值时，将父级和子级的id都存储在同一个数组中，然后在渲染树节点时，判断当前节点id是否在已选中的数组中，如果是，则默认勾选该节点，并递归勾选其所有子节点。 示例代码如下： ``` <template> <van-tree-select v-model="selected" :items="treeData" :main-active-index="mainActiveIndex" :active-id="activeId" @click-nav="onClickNav" @click-item="onClickItem" /> </template> <script> export default { data() { return { treeData: [ { text: &#39;父级1&#39;, id: 1, children: [ { text: &#39;子级1-1&#39;, id: 11 }, { text: &#39;子级1-2&#39;, id: 12 }, { text: &#39;子级1-3&#39;, id: 13 }, ], }, { text: &#39;父级2&#39;, id: 2, children: [ { text: &#39;子级2-1&#39;, id: 21 }, { text: &#39;子级2-2&#39;, id: 22 }, { text: &#39;子级2-3&#39;, id: 23 }, ], }, ], selected: [11, 2], // 已选中的节点id数组 mainActiveIndex: 0, activeId: 1, }; }, methods: { // 点击导航栏事件 onClickNav({ index }) { this.mainActiveIndex = index; }, // 点击树节点事件 onClickItem({ item }) { const index = this.selected.indexOf(item.id); if (index > -1) { this.selected.splice(index, 1); } else { this.selected.push(item.id); } }, // 渲染树节点前的判断 renderContent(h, { node, data }) { const isSelected = this.selected.includes(data.id); const props = { props: { ...node.props, checked: isSelected, }, on: { ...node.on, click: () => { this.onClickItem({ item: data }); }, }, }; return ( <van-tree-select-node {...props}> {data.text} </van-tree-select-node> ); }, }, }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值