动态行、列，并且合并

<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;
    }
  }