elementUI table表格用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
有时业务需求合并固定的行或者列,elementui官方给出相应例子,可学习一下再应用至项目中。通过给table
传入span-method
方法Function({ row, column, rowIndex, columnIndex }),可以实现合并行或列,方法的参数是一个对象,里面包含当前行row
、当前列column
、当前行号rowIndex
、当前列号columnIndex
四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。
本文先阐述合并固定行的例子,然后再阐述合并动态行的例子。
1. 合并固定行及固定列
前台拿到后台返回数据以后,需展示成如上图所示表格。后台返回数据格式如下图所示:
前台拿到数据后,首先获取数据长度