elementUI table表格动态合并行

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

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

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

\1. 合并固定行及固定列

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

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

this.dataLen = this.dataList.length

然后对第一列进行合并：

        if (columnIndex === 0) {    // 第一列



          if (rowIndex === 0) {    // 第一行时，合并dataLen行1列



            return {



              rowspan: this.dataLen,



              colspan: 1,



            }



          } else {        // 其他行时，合并0行0列



            return {



              rowspan: 0,



              colspan: 0,



            }



          }



        }

接下来对第二列进行合并：

        if (columnIndex === 1) {    // 第1列



          if (rowIndex === 0) {     // 第一行时，合并dataLen - 1行1列



            return {



              rowspan: this.dataLen - 1,



              colspan: 1,



            }



          } else if (rowIndex == this.dataLen - 1) {    // 最后一行时，合并1行1列



            return {



              rowspan: 1,



              colspan: 1,



            }



          } else {



            return {                // 其他行时，合并0行0列



              rowspan: 0,



              colspan: 0,



            }



          }



        }

最后，对最后一行进行合并：

        if (rowIndex === this.dataLen - 1) {    // 最后一行



          if (columnIndex === 2) {              // 第3列，合并1行9列



            return [1, 9]



          } else {                              // 其他行，合并1行1列



            return [1, 1]



          }



        }

至此，合并固定行列的例子就完成了。接下来阐述合并动态行的例子，如下。

前1、2、3列，合并行数相同，可能合并1行，可能合并2行，也可能合并更多行，根据后台返回数据确定到底有几行需要合并。后台返回数据格式如下所示：

      [



        {



          rkNum: 'RK000005',



          date: '2021-08-09',



          wlCompany: '504厂',



          purchaseQuantity: 2.0,



          barCode: 'CP000001',



          barName: '按键板',



          barType: '504厂',



          barUnit: '件',



          barNum: 2,



          barPrice: 0,



          remark: '',



        },



        {



          rkNum: 'RK000004',



          date: '2021-07-20',



          wlCompany: '504厂',



          purchaseQuantity: 2.0,



          barCode: 'CP000001',



          barName: '按键板',



          barType: '504厂',



          barUnit: '件',



          barNum: 5,



          barPrice: 0,



          remark: '',



        },



        {



          rkNum: 'RK000004',



          date: '2021-07-20',



          wlCompany: '504厂',



          purchaseQuantity: 2.0,



          barCode: 'CP000002',



          barName: '显示屏',



          barType: '504厂',



          barUnit: '件',



          barNum: 5,



          barPrice: 0,



          remark: '',



        },



      ]

前台在获取到后台返回的数据后，对数据进行处理，分析出每一行数据需要合并的行数，代码如下：

      this.tableList = res.result



 



      for (var i = 0; i < this.tableList.length; i++) {



        if (i === 0) {



              this.spanArr.push(1);



              this.pos = 0



        } else {



          // 判断当前元素与上一个元素是否相同



          if (this.tableList[i].rkNum === this.tableList[i - 1].rkNum) {



            this.spanArr[this.pos] += 1;



            this.spanArr.push(0);



          } else {



            this.spanArr.push(1);



            this.pos = i;



          }



        }



      }



 



      console.log(this.spanArr)

其中，tableList是从后台获取的数据，通常是一个数组；spanArr是一个空数组，用于存放每一行记录的合并数；pos是spanArr的索引。上述代码意思是：如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，０表示该行不显示，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数。

然后根据得到的合并数组spanArr，对表格进行合并，并绑定至合并方法中：

<el-table :data="tableList" border stripe :span-method="cellMerge">



</el-table>
    cellMerge({ row, column, rowIndex, columnIndex }) {



      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {



        const _row = this.spanArr[rowIndex];



        const _col = _row > 0 ? 1 : 0;



        return {



          rowspan: _row,



          colspan: _col



        }



      }



    },

至此，动态合并行功能完成。

需要注意的是，后台返回数据时，具有相同rkNum的数据，应该挨着返回。另外，重新加载数据时，记得要清空spanArr 数组，不然合并会错乱。