ElementUI+VUE el-table多列跨行合并单元格

效果图

1. el-table 加 :span-method=“objectSpanMethod”

<el-table v-loading="loading" :data="list" :span-method="objectSpanMethod" border @cell-click="handleDetail"
              :summary-method="getSummaries" show-summary>
	......
</el-table>

2. filterTableData，objectSpanMethod

data() {
    return {
      warehouseNameArr: [],
      supplierNameArr: [],
      list: [],
    },
  };
},
methods: {
	// this.list为列表数据，获取this.list后调用this.filterTableData() 获取rowspan跨行数
	filterTableData() {
	  this.warehouseNameArr = [];
	  this.supplierNameArr = [];
	  let contactDot = 0;
	  let contactDotSupplierName = 0;
	  this.list.forEach((item, index) => {
	    if (index == 0) {
	      this.warehouseNameArr.push(1)
	      this.supplierNameArr.push(1)
	    } else {
	      // 仓库名称
	      if (item.warehouseName === this.list[index - 1].warehouseName) {
	        this.warehouseNameArr[contactDot] += 1;
	        this.warehouseNameArr.push(0)
	      } else {
	        contactDot = index
	        this.warehouseNameArr.push(1)
	      }
	      // 仓库名称相同且供应商名称相同
	      if (item.warehouseName === this.list[index - 1].warehouseName && item.supplierName === this.list[index - 1].supplierName) {
	        this.supplierNameArr[contactDotSupplierName] += 1;
	        this.supplierNameArr.push(0)
	      } else {
	        contactDotSupplierName = index
	        this.supplierNameArr.push(1)
	      }
	    }
	  })
	},
	objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	  // 仓库名称
	  if (columnIndex === 0) {
	    if (this.warehouseNameArr[rowIndex]) {
	      return {
	        rowspan: this.warehouseNameArr[rowIndex],
	        colspan: 1
	      }
	    } else {
	      return {
	        rowspan: 0,
	        colspan: 0
	      }
	    }
	  }
	  // 供应商名称
	  if (columnIndex === 1 || columnIndex === 16) {
	    if (this.supplierNameArr[rowIndex]) {
	      return {
	        rowspan: this.supplierNameArr[rowIndex],
	        colspan: 1
	      }
	    } else {
	      return {
	        rowspan: 0,
	        colspan: 0
	      }
	    }
	  }
	},
}