vue element表格合并行数据

vue element表格合并行数据

支持不分页的表格数据，分页的表格数据还有小bug

<template>
  <el-container>
    <el-main>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :span-method="objectSpanMethod"       //添加这个实现行数据合并
      >
        <el-table-column label="序号" prop="id" align="center"></el-table-column>
          <el-table-column label="名字" prop="screenName" align="center"></el-table-column>
          <el-table-column label="时间1" prop="startTime" align="center"></el-table-column>
          <el-table-column label="时间2" prop="endTime" align="center"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Formtableyes",
  data() {
    return {
      //合并行
      spanArr: [],      //声明一个数组
      tableData: [
        { id: 1, screenName: "LHC", startTime: "12", endTime: "1231" },
        { id: 1, screenName: "LHC", startTime: "12", endTime: "123" }
      ]
    };
  },
  mounted: function() {
    this.tableDatas();               //加载数据就调用该方法
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {                     //合并第一列
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }      
      if (columnIndex === 1) {                     //合并第二列
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };         
      }                                  
      // if (columnIndex === 2) {                     //合并第三列
      //   const _row = this.spanArr[rowIndex];
      //   const _col = _row > 0 ? 1 : 0;
      //   return {
      //     rowspan: _row,
      //     colspan: _col
      //   };
      // }                      
    },
    tableDatas() {
      let contactDot = 0;
      this.tableData.forEach((item, index) => {
        item.index = index;
        if (index === 0) {
          this.spanArr.push(1);
        } else {
          if (item.id === this.tableData[index - 1].id) {
            this.spanArr[contactDot] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            contactDot = index;
          }
        }
      });
    },
    
  }
};
</script>
<style scoped>
.ptselect {
  width: 100%;
}
</style>

效果如下：