Vue+Element Ui (tabel) 合并行介绍

前景介绍: vue + element ui 的PC端项目,需要实现的需求如图所示表格的合并行

在element 的官网也介绍了表格的行与列的合并,主要是根据行数与列数的下标来处理的,但是实际的项目中我们的需求一般都比直接使用下标的方式要复杂的多,这里主要就是实现数据的包装.

这里的数据是随便写的,这里的逻辑是同一个用户在不同的月份分别有任务,需要将同名的用户名的行合并

tableData: [{
          id: '王小虎',
          name: '2021-7',
          amount1: '4',
          amount2: '3.2',
          amount3: 10,
        }, {
          id: '王小虎',
          name: '2021-9',
          amount1: '5',
          amount2: '4.43',
          amount3: 12,
        }, 
        {
          id: '张三',
          name: '2020-7',
          amount1: '4',
          amount2: '1.9',
          amount3: 9,
        }, 
        {
          id: '李四',
          name: '2021-5',
          amount1: '2',
          amount2: '2.2',
          amount3: 17,
        },{
          id: '李四',
          name: '2021-8',
          amount1: '9',
          amount2: '4.1',
          amount3: 15,
      }],
      
    //对列表数据进行处理  
    this.tableData.map((item)=>{
      item.firstIndex = this.tableData.findIndex((itm)=>{
          return item.id == itm.id
      });//每一个用户第一次出现的下标
      item.length = this.tableData.filter((it)=>{
          return item.id == it.id
      }).length; // 每一个用户出现的次数,就合并几行
    })
    
    
    //表格封装的 - 合并行或列的计算方法(span-method)
    arraySpanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex == 0) { //只合并第一列的名字
        if(row.firstIndex == rowIndex){//如果名字第一次出现的下标和行号(当前行的下标)相等
          return {
            rowspan:row.length > 1 ? row.length : 1,
            colspan:1
          }
        }else{
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },

虽然代码贴的不是很完整但是主要部分都在了,满足查看了.