el-table自定义合并行或列

ElementUI：通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

以下是合并行：

template:

      :data="tableData"

      :span-method="objectSpanMethod"

      border

      style="width: 100%; margin-top: 20px">

     

     

     

     

        prop="name"

        label="姓名">

     

     

        prop="amount1"

        label="数值 1（元）">

     

     

        prop="amount2"

        label="数值 2（元）">

     

     

        prop="amount3"

        label="数值 3（元）">

     

   

js：

data() {

  return {

spanArr: [],

pos: 0

  }

},

watch: {

  tableData: {

    handler () {

      this.getSpanArr(this.tableData)

    },

    immediate: true

  }

},

methods: {

// 根据条件合并随意行数，因为合并的行数可能是不固定的（传入的data参数为从后台数据数据）

    getSpanArr(data) {

      this.spanArr = []

      this.pos = 0

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

        if (i === 0) {

          // 如果是第一条记录（即索引是0的时候），向数组中加入１

          this.spanArr.push(1)

          this.pos = 0

        } else {

          if (data[i].name=== data[i - 1].name) {

            // 如果name相等就累加，并且push 0 （这里的判断视自己的判定依据改变,name就是要对比的字段）

            this.spanArr[this.pos] += 1

            this.spanArr.push(0)

          } else {

            // 不相等push 1

            this.spanArr.push(1)

            this.pos = i

          }

        }

      }

    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {

      // 用于设置要合并的列 0 表示第一列

      if (columnIndex === 0) {

        const cRow = this.spanArr[rowIndex]

        const cCol = cRow > 0 ? 1 : 0

        return {

          rowspan: cRow, // 合并的行数

          colspan: cCol // 合并的列数，为0表示不显示

        }

      }

    }

}

原文链接：https://blog.csdn.net/qq_38157825/article/details/119211247