el-table 动态列 el-table-column

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了el-table 动态列 el-table-column相关的知识,希望对你有一定的参考价值。

参考技术A 方法一

方法二

方法一 方法二 的数据结构

方法三

参考: 对象属性键值 [key] 属性问题

el-table动态获取数据合并行列

参考技术A 动态-合并行
可能出现的情况:
一个同一订单号购买3个商品,
下一个同一订单号购买4个商品,
下一个同一订单号购买1个商品,
下一个同一订单号购买n个商品...

1.这里忽略数据处理,假设数据已经处理完成,并能正确的在表格中渲染出来。
2.给 <el-table> 添加 处理行的方法 :span-method="objectSpanMethod"
3.在 methods 中写对表格数据进行处理,找出需要合并的单元格的方法 getSpanArr() ,该方法需要加在页面渲染之前获取列表数据的方法中并传入列表需要渲染的数据作为参数

4.在 methods 中写合并行的方法 objectSpanMethod()

参考文章:
element合并行或列
el-table动态获取数据合并行列

以上是关于el-table 动态列 el-table-column的主要内容,如果未能解决你的问题,请参考以下文章

VUE项目中el-table动态合并列单元格(附带代码解析注释)

使用element中el-table动态增减表头列的时候出现抖动闪动的问题

el-table动态获取数据合并行列

el-table动态合并单元格

el-table动态合并单元格

el-table动态合并单元格