使用el-table,将连续相同内容的单元格合并行

1.element官方文档

   el-tabale使用方法 :span-method="arraySpanMethod"




   arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      }

return [1,2] 是指 [rowspan: 1,colspan: 2],这里的意思渲染到当前rowIndex,columnIndex的单元格时，返回的占用情况[1,1]表示1行1格，当前的值，[0,0]表示不占任何单元格，[1,2]则表示该数据占1行2格，所以是将当前columnIndex和columnIndex+1的单元格合并，并显示columnIndex的值

2.如何将连续的数据合并

我们可以将请求返回的数据，通过数据处理将每个单元格返回的rowspan和colspan计算好，放到参数，然后表格渲染的时候进行返回

indexList: [] //定义数组 //数据结构为{ rowIndex: undefined, columnIndex:undefined,spanDis: { rowspan: undefined, colspan: undefined } },





//返回数据处理逻辑代码
  this.conditionList = response.rows
 if (response.rows.length !== 0) {
          let columns = this.$refs.table13.columns
          //rowIndex 可以自己设置 我这里方便测试设置为3 表示从第四行数据计算，全部计算则算为0
          for (let rowIndex = 3; rowIndex < this.conditionList.length; rowIndex++) {
            //columnIndex 和上面同理
            for (let columnIndex = 10; columnIndex < columns.length; columnIndex++) {
              let data = _.find(this.indexList, { 'rowIndex': rowIndex, 'columnIndex': columnIndex })
              if (data) {
                continue
              } else {
                let colspan = 1
                let property = columns[columnIndex].property
                let item=this.conditionList[rowIndex]
                let currentCellValue = item[property] //当前单元格的值
                for (let index = columnIndex + 1; index < columns.length; index++) {
                    //判断单元格的值是否与后面的相同
                  let property = columns[index].property
                  let nextCellValue=item[property]
                  if (currentCellValue === nextCellValue) {
                    colspan++
                  }else {
                    //两个值不相同跳出循环
                    break
                  }

                }

                if(colspan>1){
                  for (let i = 0; i < colspan; i++) {
                    if (i === 0) {
                      this.indexList.push({
                        rowIndex: rowIndex,
                        columnIndex: columnIndex,
                        spanDis: { rowspan: 1, colspan: colspan }
                      })
                    } else {
                      this.indexList.push({
                        rowIndex: rowIndex,
                        columnIndex: columnIndex+i,
                        spanDis: { rowspan: 0, colspan: 0 }
                      })
                    }

                  }
                }else {
                  this.indexList.push({
                    rowIndex: rowIndex,
                    columnIndex: columnIndex,
                    spanDis: { rowspan: 1, colspan: 1 }
                  })
                }

              }

            }
          }
        }

3.在渲染时判断数据返回

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let data = _.find(this.indexList, { 'rowIndex': rowIndex, 'columnIndex': columnIndex })
      if(data){
        return data.spanDis
      }else {
        return {rowspan: 1, colspan: 1}
      }


    }