【表格合并单元格】vue-elementul表格动态合并实现方法，合并行，合并列方法【详细讲解，看完就理解】_vue element-ui table表格行合并

功能

这个elementul表格单元格合并功能是很多地方会用到的，但是官方文档那个有点看的不明白。这里详细讲一下。
这里包含有一个行的合并方法，一个列的合并方法，都是详细注释了的，讲解了他的规则，看完后就知道怎么用这个了

效果图

这里是合并的样子，有竖着合并的，也有横着合并的。放在一起

这里是原本的表格样子，没有合并的

完整代码

这里可以直接复制到你的vue内打开试试效果，就是上面图片的样子

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="number" sortable label="number"> </el-table-column>
      <el-table-column prop="age" sortable label="age"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表格数据
      tableData: [
        {
          id: "000",
          name: "肖战",
          number: "234",
          age: 7,
        },
        {
          id: "001",
          name: "王一博",
          number: "234",
          age: 8,
        },
        {
          id: "002",
          name: "魏无羡",
          number: "324",
          age: 9,
        },
        {
          id: "003",
          name: "蓝忘机",
          number: "621",
          age: 10,
        },
        {
          id: "004",
          name: "李希侃",
          number: "539",
          age: 11,
        },
        {
          id: "005",
          name: "小栗旬",
          number: "539",
          age: 12,
        },
      ],
      spanArr: [], //每行合并数
      pos: 0, //角标索引
    };
  },
  mounted() {
    //清空合并坐标
    this.spanArr = []; //每行合并数
    this.pos = 0; //角标索引
    this.getSpanArr(this.tableData); //先处理数据，把表格数据放进去
  },
  methods: {
    // 竖着合并处理数据
    getSpanArr(data) {
      // 循环
      for (var i = 0; i < data.length; i++) {
        // 循环的第一行默认角标给个0，合并数给个1，因为rowspan和colspan需要默认是1，如果是0的话就不显示这个单元格了
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          //这里已经循环到第二行了才会走这里
          // 判断当前行的某一个字段和上一行的某一个字段是否相同？
          if (data[i].number === data[i - 1].number) {
            //如果相同代表要合并，就给上一个元素合并数+1。
            this.spanArr[this.pos] += 1; //这里pos是0。所以是给spanArr内第一条数据的合并数加了1，变成了2，代表从第一行开始合并1格，记住，1是默认有一格，没加1代表合并一格
            this.spanArr.push(0); //然后再往spanArr内添加一个0。为什么要这么做呢，因为这里push进去0是加在第二个数据上的。合并的方法内写法是，1代表有数据，每加1代表合并一格，如果是0代表隐藏这一格，上面我们已经变成2了，所以合并一格，合并的就是第二格的数据，如果我们不给第二格的数据改为0.那么第二格的数据会显示，但是被挤在边上，所以这里给0让第二格数据隐藏
          } else {
            this.spanArr.push(1); //反之，如果不等于那就正常给个1显示数据但是不合并。
            this.pos = i; //pos的角标也改为当前的循环。方便下一次循环的时候如果两个字段相同，合并数直接从下一个角标算起
          }
        }
      }
      console.log(this.spanArr, "span"); //[2, 0, 1, 1, 2, 0]
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //横向合并
      //角标为2的行，按顺序012也就是第三行数据
      if (rowIndex === 2) {
        //从第一列开始
        if (columnIndex === 0) {
          //两个参数：竖着合并几位，横向合并几位
          return [1, 3];
        } else if (columnIndex === 1) {
          //这里的意思是第二列不显示，0代表不显示，如果不写这个，那么上面合并的时候就会把这列的数据给挤到旁边去。
          return [0, 0];
        } else if (columnIndex === 2) {
          //这里同理。你需要合并到多少列就把多少列的数据00隐藏掉。
          return [0, 0];
        }
      }

      // 竖向合并
      if (columnIndex === 0) {
        //第一列    //this.spanArr目前的值是[2, 0, 1, 1, 2, 0]
        const _row = this.spanArr[rowIndex]; //这里拿到spanArr内的第一个数据，我们上面处理时第一个数据是2，所以是合并一格的意思
        const _col = _row > 0 ? 1 : 0; //这里判断2大于0所以col的值是1，代表正常显示
        return {
          rowspan: _row, //这里是2，代表竖着合并数一格
          colspan: _col, //这里是1，代表显示这一格，但是被上面的合并了，所以看不到这个值。如果为0，这一列就不显示了
        };
        //这个位置，else if在来一次，1是角标，代表数组中的角标1，也就是第二列。如果你还想第三列参与合并，那就再else if (columnIndex === 2)，以此类推就行。
      } else if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>

<style>
</style>
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

到这里就把所有规则讲清了，合并的规则。那么可以根据这个规则大家自由发挥

加一点，注意事项：

在正式和后端对接时，this.getSpanArr(this.tableData)的调用不是放在mounted内的，而是直接放在你的请求数据的方法then中的。那么就会造成一个情况，你点击后第一次是正常的，但是你再发送一次请求的时候就会发现你的合并表格变大了，然后有一部分被挤走到旁边之类的。这是因为你的合并坐标并没有清空。还是保存的上一次的，你再点一次就在这基础上再加，所以数据就混乱了。

所以需要在then调用this.getSpanArr(this.tableData)之前把spanArr和pos都清空。

        //清空合并坐标
        this.spanArr = []
        this.pos = 0
1
2
3

2023-9-21更新

简化版合并(列单元格上下相同的合并)

讲解：
objectSpanMethod这个是合并方法，写在表格标签上的那个。不用动
setdates 这个是你请求后台拿到数据后调用一下这个方法，需要改动的地方有两个，一个是tableData这个是你获取的表格数据数组，名字如果不一样就修改一下。还有就是item.zxbm_name === this.tableDatas[index - 1].zxbm_name这句话，改动后面的zxbm_name，这个就是你要合并的列字段名。
然后你再data中定义一个变量spanArr是数组。
然后就完事了！

objectSpanMethod({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (columnIndex === 0) {
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
            },
            setdates() {
                let contactDot = 0;
                this.spanArr = []
                this.tableData.forEach((item, index) => {
                    item.index = index;
                    if (index === 0) {
                        this.spanArr.push(1);
                    } else {
                        if (item.zxbm_name === this.tableDatas[index - 1].zxbm_name) {
                            this.spanArr[contactDot] += 1;
                            this.spanArr.push(0);
                        } else {
                            contactDot = index;
                            this.spanArr.push(1);
                        }
                    }
                });
            },
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