Element实现行合并

效果图

完整代码

<template>
  <div class="app-container">
    <el-table ref="multipleTable" border :data="tableData" :span-method="objectSpanMethod" 
      @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter" :cell-class-name="tableRowClassName">
        <el-table-column label="商品类别" align="center">
          <template slot-scope="scope" width="160">
              <div>{{scope.row.productType}}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品价格" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.price}}</p>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="180px" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.productName}}</p>
          </template>
        </el-table-column>
       <el-table-column label="操作人员" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.operator}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center">
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  name: 'tool',
  data() {
    return {
      //表格数据列表
      tableData: [
        {
          productType: "纺织品",
          productName: '男装上衣',
          amount: 20,
          operate_number: "20180831142020",
          price: "31.00",
          updateTime: "2018-08-31",
          operator: "小吴"
        },{
          productType: "纺织品",
          productName: '男装裤子',
          amount: 20,
          operate_number: "20180831142020",
          price: "32.00",
          updateTime: "2018-08-31",
          operator: "小吴"
        },{
          productType: "饮料",
          productName: '康师傅冰红茶',
          amount: 20,
          operate_number: "20180823142020",
          price: "33.00",
          updateTime: "2018-08-31",
          operator: "小吴"
        },{
          productType: "纺织品",
          productName: '男装裤子',
          amount: 10,
          operate_number: "20180821142020",
          price: "34.00",
          updateTime: "2018-08-31",
          operator: "小王"
        },{
          productType: "绸缎",
          productName: '旗袍',
          amount: 200,
          operate_number: "20180821142020",
          price: "35.00",
          updateTime: "2018-08-31",
          operator: "小吴"
        },{
          productType: "绸缎",
          productName: '席子',
          amount: 20,
          operate_number: "20180821142020",
          price: "36.00",
          updateTime: "2018-08-31",
          operator: "小吴"
        },
      ],
      orderIndexArr: [],
      hoverOrderArr: [],
    }
  },
  created() {

  },
  mounted() {
    this.getOrderNumber();
  },
  methods: {
    // 获取相同编号的数组
    getOrderNumber() {
      let orderObj = {}
      this.tableData.forEach((element, index) => {
          element.rowIndex = index
          if (orderObj[element.operate_number]) {
            orderObj[element.operate_number].push(index)
          } else {
            orderObj[element.operate_number] = []
            orderObj[element.operate_number].push(index)
          }
      })
      // 将数组长度大于1的值 存储到this.orderIndexArr（也就是需要合并的项）
      for (let k in orderObj) {
        if (orderObj[k].length > 1) {
          this.orderIndexArr.push(orderObj[k])
        }
      }
    },
    // 合并单元格
    objectSpanMethod({row,column,rowIndex,columnIndex}) {
      // if条件控制那列需要合并的下标，默认从0开始
      if (columnIndex === 0 || columnIndex === 3 || columnIndex === 4) {
        for (let i = 0; i < this.orderIndexArr.length; i++) {
          let element = this.orderIndexArr[i]
          for (let j = 0; j < element.length; j++) {
            let item = element[j]
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                }
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }
    },
    // 单元格样式
    tableRowClassName({row,rowIndex}) {
      let arr = this.hoverOrderArr
      for (let i = 0; i < arr.length; i++) {
        if (rowIndex == arr[i]) {
          return 'hovered-row'
        }
      }
    },
    //鼠标划入效果
    cellMouseEnter(row, column, cell, event) {
      this.rowIndex = row.rowIndex;
      this.hoverOrderArr = [];
      this.orderIndexArr.forEach(element => {
        if (element.indexOf(this.rowIndex) >= 0) {
          this.hoverOrderArr = element
        }
      })
    },
    //鼠标划出效果
    cellMouseLeave(row, column, cell, event) {
      this.rowIndex = '-1'
      this.hoverOrderArr = [];
    },
    //修改按钮
    handleEdit(row) {

    },
    //删除按钮
    handleDelete(row) {

    }
  }
};
</script>

<style lang="scss" scoped>
.el-table {
  ::v-deep .hovered-row {
    background: #f5f7fa;
  }
}
</style>

注意

目前我们表格数据是假数据，但实际上是要从数据库查询返回来的。

通过实际测试可以发现，mounted方法中 拿不到 created方法中赋值过的表格数据。因为请求可能有延迟。

所以我们可以在调用 getOrderNumber方法时可以延时500毫秒在调用，就可以解决这个问题。

mounted() {
  setTimeout(() => {
    this.getOrderNumber();
  }, 500);
  
},

---

如果有收获！ 希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客