前几天由于公司业务需求，要根据运营商对表格数据进行合并，同时由于数据量庞大，要求进行分页。于是参照element官方文档，试了后从第二页开始，合并就失效了，于是通过打印发现合并的方法:span-method在第二页分页及以后分页中传入的rowIndex会重新从零开始，导致返回的合并对象不符合。具体实现代码如下：

template部分:

<template>
  <el-table
      :data="tableList.slice((pageInfo.pageNum -1) * pageInfo.pageSize , pageInfo.pageNum * pageInfo.pageSize)"
      :span-method="CellRowAssign"
      border
      stripe
      style="width: 100%"
  >

    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="ID" prop="id"></el-table-column>
    <el-table-column label="数量1" prop="amount1"></el-table-column>
    <el-table-column label="数量2" prop="amount2"></el-table-column>
    <el-table-column label="数量3" prop="amount3"></el-table-column>
  </el-table>
  <el-pagination
      :current-page.sync="pageInfo.pageNum"
      :page-size="this.pageInfo.pageSize"
      :total="this.tableList.length"
      background
      layout="total, prev, pager, next"
      style="margin-top: 50px;justify-content: flex-end"
      @current-change="handleCurrentChange"
  />
</template>

script部分：

<script>
export default {
  name: "TableIndentO",
  data() {
    return {
      tableList: [
        {
          id: '12987122',
          name: 'Tom',
          amount1: '234',
          amount2: '3.2',
          amount3: 10,
        },
        {
          id: '12987123',
          name: 'Tom',
          amount1: '165',
          amount2: '4.43',
          amount3: 12,
        },
        {
          id: '12987124',
          name: 'Jack',
          amount1: '324',
          amount2: '1.9',
          amount3: 9,
        },
        {
          id: '12987125',
          name: 'Jerry',
          amount1: '621',
          amount2: '2.2',
          amount3: 17,
        },
        {
          id: '12987126',
          name: 'Jerry',
          amount1: '539',
          amount2: '4.1',
          amount3: 15,
        },
        {
          id: '12987127',
          name: 'May',
          amount1: '621',
          amount2: '2.2',
          amount3: 17,
        },
        {
          id: '12987128',
          name: 'Lily',
          amount1: '539',
          amount2: '4.1',
          amount3: 15,
        },
      ],
      spanArray: [],
      pos: null,
      pageInfo: {
        pageNum: 1,
        pageSize: 5
      }
    }
  },
  created() {
    this.getSpanArray(this.tableList)
  },
  methods: {
    //修改分页

    //记录合并位置
    getSpanArray(data) {
      data = data.sort((a,b)=> b-a)
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArray.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].name === data[i - 1].name) {
            //当后一项和前一项id相同
            this.spanArray[this.pos] += 1;
            this.spanArray.push(0);
          } else {
            this.spanArray.push(1);
            this.pos = i;
          }
        }
      }
    },
    //合并方法
    CellRowAssign({row, column, rowIndex, columnIndex,}) {
      const {pageNum, pageSize} = this.pageInfo
      //只对第一列进行合并
      if (columnIndex === 0) {
        //初始化分页为一
        if (pageNum == 1) {
          const _row = this.spanArray[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        } else {
          const _row = this.spanArray[(pageNum - 1) * pageSize];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }

      }
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val
    }
  }
}
</script>

最终效果：

！！！

修改：经过后续测试发现，改方法在以下情况下会产生异常。

1）当数据列表相同两项之间有一项不同的数据时，合并便失效了。解决方法：对数据排序(sort).

2) 当pagesize末尾数据与下一分页首条数据需要合并时，下一分页首条数据的内容将由于合并置空。

本文由 yuin 创作，
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。