elementUI 相同元素合并行（并实现斑马线效果）

一、效果示意：

二、核心代码：
1.在el-table上加上（不要加“stripe”）：

:row-class-name="tabRowClassName"
:span-method="objectSpanMethod"

2.在created或其他地方加上：

 this.setrowspans()

3.在methods中加上：

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0,1,2,3].includes(columnIndex)) { 	// 前4列有相同值时合并行
        return {
          rowspan: row.rowspan,
          colspan: 1
        };
      }
    },
    // 用于区分出id相同的值
    setrowspans() {
      // 先给所有的数据都加一个v.rowspan = 1
      this.tableData.forEach(v => {
        v.rowspan = 1
        v.classStripe = false
      })
      // 双层循环
      for (let i = 0; i < this.tableData.length; i++) {
        // 内层循环，上面已经给所有的行都加了v.rowspan = 1
        // 这里进行判断
        // 如果当前行的id和下一行的id相等
        // 就把当前v.rowspan + 1
        // 下一行的v.rowspan - 1
        for (let j = i + 1; j < this.tableData.length; j++) {
          if (this.tableData[i].id === this.tableData[j].id) {
            this.tableData[i].rowspan++
            this.tableData[j].rowspan--
            this.tableData[j].classStripe = this.tableData[i].classStripe
          }else{
            this.tableData[j].classStripe = !this.tableData[i].classStripe
          }
        }
        // 这里跳过已经重复的数据
        i = i + this.tableData[i].rowspan - 1
      }
    },
    tabRowClassName({row,rowIndex}){
      if(row.classStripe){
        return 'warning-row'
      }
    },

3.样式：

.el-table {
  /deep/ .warning-row {
    background: #FAFAFA;
  }
}

三、data测试用数据：

	 tableData: [{
	   id: '1',
	   name: '王小虎',
	   amount1: '234',
	   amount2: '3.2',
	   amount3: 10
	 }, {
	   id: '1',
	   name: '王小虎',
	   amount1: '165',
	   amount2: '4.43',
	   amount3: 12
	 }, {
	   id: '1',
	   name: '王小虎',
	   amount1: '324',
	   amount2: '1.9',
	   amount3: 9
	 }, {
	   id: '2',
	   name: '王小虎',
	   amount1: '621',
	   amount2: '2.2',
	   amount3: 17
	 }, {
	   id: '3',
	   name: '王小虎',
	   amount1: '539',
	   amount2: '4.1',
	   amount3: 15
	 }, {
	   id: '3',
	   name: '王小虎',
	   amount1: '539',
	   amount2: '4.1',
	   amount3: 15
	 }, {
	   id: '3',
	   name: '王小虎',
	   amount1: '539',
	   amount2: '4.1',
	   amount3: 15
	 }, {
	   id: '3',
	   name: '王小虎',
	   amount1: '539',
	   amount2: '4.1',
	   amount3: 15
	 }, {
	   id: '5',
	   name: '王小虎',
	   amount1: '539',
	   amount2: '4.1',
	   amount3: 15
	 }, {
	   id: '5',
	   name: '王小虎',
	   amount1: '539',
	   amount2: '4.1',
	   amount3: 15
	 }]

四、参考资料：

https://blog.csdn.net/fkl978830065/article/details/102492489