el-table表格的行合并以及合并后序号的处理_el-table合并单元格后序号不对

el-table表格的行合并以及合并后序号的处理

el-table表格行合并后序号错乱，需要对序号重新排列。
最终实现效果：

1.表格的行合并

封装一个需要合并的行方法：

export function colMethod(columnArr, data) {
  // columnArr 合并行所在的列字段
  // data 需要合并的表格数据
  let column = {}
  let position = 0
  // 遍历合并的列数据
  columnArr.forEach((prop) => {
    column[prop] = []
    //  遍历合并的行数据
    data.forEach((row, rowIndex) => {
      // 第N列第一行
      column[prop][rowIndex] = [1, 1]
      if (rowIndex === 0) {
        // 记录当前行号
        position = 0
      } else if (row[prop] === data[rowIndex - 1][prop]) {
        // 当前行数据等于上一行，根据记录的行号，计算需要合并几行。
        column[prop][position][0] += 1
        // 当前行 隐藏不显示
        column[prop][rowIndex][0] = 0
      } else {
        // 不相等之后，重置记录行号
        position = rowIndex
      }
    })
  })
  return column
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

获取到表格数据后，调用这个方法，计算需要合并的行：

<el-table :data="tableData" :span-method="objectSpanMethod">
</el-table>
1
2

<script>
import { GetResultCost } from '@/apis/api'
import { colMethod } from '@/utils/util'
export default {
  data() {
    return {
      tableData: [], //表格数据
      mergeArr: {}
    }
  },
  async created() {
    await this.getResultCost()
  },
  methods: {
    async getResultCost() {
      await GetResultCost().then((res) => {
        if (res.Status && res.Data) {
          if (res.Data.Data && res.Data.Data.length > 0) {
            this.tableData = res.Data.Data
            // 计算合并的行
            this.mergeArr = colMethod(['CompanyName','IndexName'], this.tableData)
          }
        }
      })
    },
    // 表格调用的合并方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let arr = this.mergeArr[column.property] || []
      if (arr.length) return arr[rowIndex]
      else[1, 1]
    },
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2.序号的处理

获取到表格数据后，根据合并后的行对序号进行重新排列，同时表格行合并时序号列也要跟着合并。

<el-table :data="tableData" :span-method="objectSpanMethod" >
	<el-table-column :resizable="false" label="序号" type="index" width="55" :index="indexMethod"></el-table-column>
</el-table>
1
2
3

<script>
import { GetResultCost } from '@/apis/api'
import { colMethod } from '@/utils/util'
export default {
  data() {
    return {
      tableData: [], //表格数据
      mergeArr: {},
      indexNum: {}
    }
  },
  async created() {
    await this.getResultCost()
  },
  methods: {
    async getResultCost() {
      await GetResultCost().then((res) => {
        if (res.Status && res.Data) {
          if (res.Data.Data && res.Data.Data.length > 0) {
            this.tableData = res.Data.Data
            // 计算合并的行
            this.mergeArr = colMethod(['CompanyName'], this.tableData)
            this.indexobj() //排列序号
          }
        }
      })
    },
    // 表格调用的合并方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let arr = this.mergeArr[column.property] || []
      if (column.type == 'index' && this.mergeArr['CompanyName'])
        return this.mergeArr['CompanyName'][rowIndex]
      else if (arr.length) return arr[rowIndex]
      else[1, 1]
    },
    // 排列序号
    indexobj() {
      var num = 0
      this.mergeArr['CompanyName'].forEach((item, index) => {
        if (item[0] != 0) {
          this.indexNum[index] = num += 1
        }
      })
    },
    // 自定义序号
    indexMethod(index) {
      return this.indexNum[index]
    },
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51