Vue3 + ElementPlus动态合并数据相同的单元格的完整代码

目录

• 效果图
• 后台返回的数据结构
• 代码详解
• 完整代码

最近的新项目有个需求需要合并单元列表。ElementPlus 的 Table 提供了合并行或列的方法，可以参考一下https://element-plus.org/zh-CN/component/table.html

但项目中，后台数据返回格式和指定合并是动态且没有规律的，Element 的示例过于简单，因此记录下来，大家可以参考一下！

效果图

后台返回的数据结构

代码详解

实操中，需要合并的代码通常就是 list_cnt 数据需要进行合并，因为后台返回的格式都是Data 数据中包裹着 list_cnt 数据，这种格式看起来也是比较清晰。由 Element 文档可知：el-table 组件主要靠 :span-method 方法实现合并。

完整代码

代码中会有一些注释，根据个人需求可以进行参考，此需求也涉及到按钮操作的，如果没有次需求可以忽略不看。

以上就是列表的合并单元格，如果对你有帮助，麻烦点个赞呗~

到此这篇关于Vue3 + ElementPlus动态合并数据相同的单元格的文章就介绍到这了,更多相关Vue3 ElementPlus动态合并单元格内容请搜索科站长以前的文章或继续浏览下面的相关文章希望大家以后多多支持科站长！