elementUI table表格动态合并行

本文介绍了如何在ElementUI的Table组件中实现表格行的动态合并。首先讲解了合并固定行和列的方法,涉及对rowIndex和columnIndex的处理。接着详细阐述了动态合并行的实现过程,通过分析后台返回数据,计算出需要合并的行数,并在前端进行相应的表格设置。文章强调了后台数据排列的重要性以及重新加载数据时对合并数组的清理。
摘要由CSDN通过智能技术生成

elementUI table表格用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

有时业务需求合并固定的行或者列,elementui官方给出相应例子,可学习一下再应用至项目中。通过给table传入span-method方法Function({ row, column, rowIndex, columnIndex }),可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspancolspan的对象。

本文先阐述合并固定行的例子,然后再阐述合并动态行的例子。

1. 合并固定行及固定列

 前台拿到后台返回数据以后,需展示成如上图所示表格。后台返回数据格式如下图所示:

前台拿到数据后,首先获取数据长度

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值