elementUI table表格动态合并行

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

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

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

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

elementUI table表格动态合并行_第1张图片

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

elementUI table表格动态合并行_第2张图片

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

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]



          }



        }

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

elementUI table表格动态合并行_第3张图片

前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的索引。上述代码意思是:如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,则向spanArr中添入元素0,0表示该行不显示,并将前一位元素+1,表示合并行数+1,以此往复,得到所有行的合并数。

然后根据得到的合并数组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 数组,不然合并会错乱。

你可能感兴趣的:(前端,elementui,javascript,前端)