Vue3+ElementPlus实现Table表格的行合并（单个及多个）_vue3 element plus 并行或列

实现结果

    <el-table
      border
      v-loading="state.loading"
      :data="state.tableDataList"
      :height="pagTabHeight"
      row-key="id"
      ref="tableRef"
      :highlight-current-row="true"
      @row-click="rowClick"
      :span-method="objectSpanMethod"
    >
      <el-table-column type="index" label="序号" align="center" />
      <el-table-column
        prop="level"
        label="参数级别"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="year"
        label="年度"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="type"
        label="评价类型"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="way"
        label="定额方式"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="creator"
        label="创建人"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column label="创建时间" show-overflow-tooltip align="center">
        <template #default="{ row }">{{
          dateFormat(row.createTime, 'yyyy-MM-dd')
        }}</template>
      </el-table-column>
    </el-table>
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

实现方法

interface ObjInterface {
  [key: string]: any; // 字段扩展声明
}
/**
 * @description 合并表格行
 * @export
 * @param {object[]} data 表格数据
 * @param {string} rowName 合并行的name
 * @param {string} otherRowName 合并其他行
 * @return {*}
 */
export function tableRowMerge(
  data: ObjInterface[],
  rowName: string,
  otherRowName?: string
) {
  const idArray = [] as number[];
  let idPos = 0;
  for (let i = 0; i < data.length; i++) {
    // 如果当 i == 0 说明数据是第一行, 需要重新赋值
    if (i == 0) {
      // idArray.push(1) 说明这一行数据被显示出来
      idArray.push(1);
      // idPos = 0 重置当前的计数器
      idPos = 0;
    }
    // 说明不是从第一行开始遍历的
    else {
      if (otherRowName) {
        //主行之外的 另一行合并
        if (
          data[i][rowName] == data[i - 1][rowName] &&
          data[i][otherRowName] == data[i - 1][otherRowName]
        ) {
          // 如果相同就需要将 idArray 的数据自加
          idArray[idPos] += 1;
          // 同时需要将 idArray push一个0 表示下一行不用显示
          idArray.push(0);
        }
        // 说明 当前的数据和上一行的指定数据不同
        else {
          // idArray.push(1) 说明当前一行的数据需要显示
          idArray.push(1);
          // 重新给计数器赋值
          idPos = i;
        }
      } else {
        // 判断当前的指定数据是否和之前的指定数据值相同
        if (data[i][rowName] == data[i - 1][rowName]) {
          // 如果相同就需要将 idArray 的数据自加
          idArray[idPos] += 1;
          // 同时需要将 idArray push一个0 表示下一行不用显示
          idArray.push(0);
        }
        // 说明 当前的数据和上一行的指定数据不同
        else {
          // idArray.push(1) 说明当前一行的数据需要显示
          idArray.push(1);
          // 重新给计数器赋值
          idPos = i;
        }
      }
    }
  }
  return idArray;
}
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

调用方法

let rowMergeArr = [] as number[];
let rowMergeArr1 = [] as number[];

/**
 * @description 合并行
 */
interface SpanMethodProps {
  row: PriceTableItem;
  column: TableColumnCtx<PriceTableItem>;
  rowIndex: number;
  columnIndex: number;
}
const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}: SpanMethodProps) => {
  // level列
  if (columnIndex === 1) {
    // rowMergeArr[rowIndex] 取出当前存放行的合并状态
    const rowSpan = rowMergeArr[rowIndex];
    // 判断当前的 列是否需要显示
    const colSpan = rowSpan > 0 ? 1 : 0;
    return {
      rowspan: rowSpan,
      colspan: colSpan
    };
  }
  // level列之后的 type列
  if (columnIndex === 3) {
    // rowMergeArr[rowIndex] 取出当前存放行的合并状态
    const rowSpan = rowMergeArr1[rowIndex];
    // 判断当前的 列是否需要显示
    const colSpan = rowSpan > 0 ? 1 : 0;
    return {
      rowspan: rowSpan,
      colspan: colSpan
    };
  }
  // ...如果还有继续
};
onMounted(() => {
  rowMergeArr = tableRowMerge(state.tableDataList, 'level');// 主列的行合并
  rowMergeArr1 = tableRowMerge(state.tableDataList, 'level', 'type');// 其他列的行合并
});
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