动态行、列，并且合并

<el-table :data="tableData" @sort-change='sortChange' @cell-mouse-enter="handleCellMouseEnter" @cell-mouse-leave="handleCellMouseLeave"
       @row-click="onRowClick"
      :row-class-name="tableRowClassName" height="calc(100vh - 350px)" border  style="cursor: pointer;"  :span-method="objectSpanMethod"
				>
	<el-table-column label="序号" fixed align="center" width="80px">
		<template slot-scope="scope">
			<span style="display:block;font-size:12px;text-align: center;">{{ ((currentPage-1)*pageSize+scope.$index+1) }}</span>
		</template>
	</el-table-column>
	<el-table-column show-overflow-tooltip :width="col.templateFieldName.length>5?200+'px':120+'px'"  :fixed="col.type=='0'?true:false" v-for="(col,index) in cols" :key="index" :prop="col.templateField" :label="col.templateFieldName" :sortable='col.templateField=="wageDate"|| col.templateField=="userOffice" ?true:false'>
	</el-table-column>
	<el-table-column label="操作" prop="hhh" width="200">
		<template slot-scope="scope">
			<div class="button edit" @click="AddAndmodify('modify',scope.row.templateDataId)">
				<i class="el-icon-edit-outline"></i>
				<span>修改</span>
			</div>
			<div class="button delete" @click="deleteEach(scope.row.templateDataId)">
				<i class="el-icon-close"></i>
				<span>删除</span>
			</div>
		</template>
	</el-table-column>
</el-table>
arr: [],
index: 0,
currentIndex: ''
this.tableData = [ //值
        {
			id: 1,
			"wageTypes":"事业",
			"wageDate":"2023-08-30",
			"userOffice":"555",
        },
		{
			id: 1,
			"wageTypes":"事业",
			"wageDate":"2023-08-30",
			"userOffice":"555",
		},
		{
			id: 1,
			"wageTypes":"事业",
			"wageDate":"2023-08-30",
			"userOffice":"555",
		},
	     {
			id: 2,
			"wageTypes":"行政",
			"wageDate":"2022-07-01",
			"userOffice":"s",
	     }
    ]
	this.cols = [ //表头，可编辑不可编辑、固定不固定
        {
            "templateField":"wageTypes", //英文标识
            "templateFieldName":"工资类型", //表头文字
						flex: true, //是否固定
        },
        {
            "templateField":"wageDate",
            "templateFieldName":"时间",
						flex: true, //是否固定
        },
        {
            "templateField":"userOffice",
            "templateFieldName":"单位",
						flex: false, //是否固定
        }
    ]
    // 鼠标移入
      handleCellMouseEnter(row, column, rowIndex, columnIndex) {
        //标记当前是哪个分组
        this.currentIndex = row.id
      },
      // 鼠标移出
      handleCellMouseLeave() {
        //移出是清空光标
        this.currentIndex = ''
      },
      tableRowClassName({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (row.id == this.currentIndex) {
          return 'hover-bg'
        } else {
          return ''
        }
      },
    // 排序
	sortChange(column, prop, order) {
		if (column.column.label == "单位" && column.order== "ascending") {
			this.orderBy = 'userOffice asc'
			this.getData();
		} else if (column.column.label == "单位" && column.order== "descending") {
			this.orderBy = 'userOffice desc'
			this.getData();
		} else if (column.column.label == "时间" && column.order== "ascending") {
			this.orderBy = 'wageDate asc'
			this.getData();
		} else if (column.column.label == "时间" && column.order== "descending") {
			this.orderBy = 'wageDate desc'
			this.getData();
		}
	},
	//处理合并
    objectSpanMethod({
	 row,
	  column,
	  rowIndex,
	  columnIndex
	}) {
	  if (columnIndex  == 0) {
	    let ids = this.spanArr[rowIndex];
	    let idName = ids > 0 ? 1 : 0
	    return {
	      rowspan: ids,
	      colspan: idName
	    }
	  }
	},
	getSpanArr(data) {
	 this.arr = [];
	  this.index = 0
	  // 遍历数据
	  for (let i = 0; i < data.length; i++) {
	    // 如果是第一个数据，就将列表arr添加一个1，表示暂时只有一个名字相同的、且将索引index赋值为0
	    if (i === 0) {
	      this.arr.push(1);
	      this.index = 0
	    } else {
	      // 判断当前元素与上一个元素是否相同
	      if (data[i].id == data[i - 1].id) {
	        // 如果相同就将索引为 index 的值加一
	        this.arr[this.index] += 1;
	        // 且将数组添加 0
	        this.arr.push(0);
	      } else {
	        // 如果元素不同了，就可以通过索引为 index 的值知晓应该需要合并的行数
	        // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
	        this.arr.push(1);
	        // 同时 索引加一
	        this.index = i;
	      }
	    }
	  }
	}
	.el-table {
    border: 1px solid #e6e6e6;

    /deep/ thead th {
      background-color: #f5f5f5;
    }

    /deep/ tr {
      cursor: pointer;
      height: 20px;
    }

    /deep/ .el-table__body .el-table__row.hover-bg td {
      background-color: #F5F7FA;
    }
  }
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166