el-table 实现嵌套表格的思路及完整功能代码
创始人
2024-11-10 17:42:26

要实现的需求是这样的：
在这里插入图片描述
本来我是用 el-table 的 :span-method 方法实现的，但发现合并起来有问题，跟我的需求差距有些大，于是我想到了嵌套表格。但是嵌套完之后的样子也是很奇怪：
在这里插入图片描述
不要气馁，思路还是对的，只要改下样式就好了，于是就有了以下的代码：

总算功夫不负有心人，最终效果还是让我实现了。
在这里插入图片描述

总结知识点

这里总结以下要点啊，
首先嵌套就是 el-table 中再套一个 el-table，但重点是子表格不要显示表头，而且样式要自己写，尤其是要通过 :render-header 重写表格样式。这里只是粗略实现了样式，需要的同学自行优化样式。

上一篇：vue之pinia存储和读取数据

下一篇：vue3使用vue-i18n实现国际化

相关内容

热门资讯

裸辞做“一人公司”，我后悔了 去年这个时候，一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品，一个让任...
南京建成国内首个Pre-6G试... 4月21日，2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前，一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”，探讨分享优质内容传播，服务万千学员。 ...
摩托罗拉Razr 2026（R... IT之家 4 月 22 日消息，摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任，特纳斯领航：苹果新纪... 苹果首席执行官蒂姆·库克将卸任，硬件工程主管约翰·特纳斯将接任，苹果公司今天宣布此事。 库克将在夏季...