##建议先看一下官方文档 了解一下表格各个属性的意义；
但你会发现此例过于简单，死数据，但我们开发的时候往往都是后台传递过来的数据，导致我们 rowspan 的参数需要自己做判断，根据数据的相同行（或列）进行合并；
效果：
代码：
<template><div class=""><el-table:data="listData":span-method="objectSpanMethod"class="tableArea"style="width: 100%"><el-table-columnprop="type"label="序号"align="center"width="200"/><el-table-columnprop="sheetType"label="工单类型"/><el-table-columnprop="taskKey"label="taskKey"/><el-table-columnprop="templateUrl"label="templateUrl"/><el-table-columnlabel="操作"><template slot-scope="scope"><el-tooltip class="item" effect="dark" content="修改" placement="top-start"><i class="el-icon-edit-outline" @click="modify(scope)" /></el-tooltip><el-tooltip class="item" effect="dark" content="删除" placement="top-start"><i class="el-icon-delete" @click="deleteData(scope)" /></el-tooltip></template></el-table-column ></el-table></div></template><script>export default {name: 'myNeedDeal',data() {return {rowList: [],spanArr: [],position: 0,listData: []}},methods: {queryData(){//查询操作this.listData = [{id:1,type:1,sheetType: "事件单",taskKey: "shijian_01",templateUrl: "/shijian_01"},{id:2,type:1,sheetType: "事件单",taskKey: "shijian_02",templateUrl: "/shijian_02"},{id:3,type:1,sheetType: "事件单",taskKey: "shijian_03",templateUrl: "/shijian_04"},{id:4,type:2,sheetType: "问题单",taskKey: "wenti_01",templateUrl: "/wenti_01"},{id:5,type:2,sheetType: "问题单",taskKey: "wenti_02",templateUrl: "/wenti_02"},{id:6,type:2,sheetType: "问题单",taskKey: "wenti_03",templateUrl: "/wenti_03"}];this.rowspan()},rowspan() {this.listData.forEach((item,index) => {if( index === 0){this.spanArr.push(1);this.position = 0;}else{if(this.listData[index].type === this.listData[index-1].type ){this.spanArr[this.position] += 1;this.spanArr.push(0);}else{this.spanArr.push(1);this.position = index;}}})},objectSpanMethod({ row, column, rowIndex, columnIndex }) { //表格合并行if (columnIndex === 0) {const _row = this.spanArr[rowIndex];const _col = _row>0 ? 1 : 0;return {rowspan: _row,colspan: _col}}if(columnIndex === 1){const _row = this.spanArr[rowIndex];const _col = _row>0 ? 1 : 0;return {rowspan: _row,colspan: _col}}}},mounted() {this.queryData();}}</script><style lang="scss" scoped>.el-select {margin-right: 15px;}.el-input {margin-right: 15px;width: 200px;}.tableArea {margin-top: 20px;box-shadow: 0 0 8px 0 #aaa;}i[class^="el-icon"] {margin-right: 5px;font-size: 16px;cursor: pointer;}.modify_table{td{padding: 10px ;}}.item_title{text-align: right;}</style>
详细说明：
:span-method="objectSpanMethod"
这个是官方给定的绑定属性和对应的方法，objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
row: 当前行
column: 当前列
rowIndex：当前行号
columnIndex ：当前列号
该函数可以返回对象获数组，数组length为2，第一个代表rowspan，第二个代表colspan；对象键名为rowspan和colspan。
this.spanArr 数组 ，返回的是相对应的行合并行数
这个示例打印出的this.spanArr为 [3, 0, 0, 3, 0, 0]，比如，第一个元素为3，表示第一行应该向下合并3行（即第一行的rowspan为3），第二个元素的rowspan为0，就让它“消失”。
rowspan（）这个函数就是用来返回 this.spanArr 数组的，定义每一行的 rowspan
rowspan（）函数，if( index === 0)，第一行，直接先给数组push进一个1，表示自己先占一行，this.position是数组元素的位置（此时是从数组元素的第一个开始，所以this.position为0）， this.position为0意思表示的就是数组的第一个元素。
当到了index为2的时候，if(this.listData[index].type === this.listData[index-1].type )，让第二行与第一行作比较，
如果第二行与第一行相等的话，this.position就+1，当有n行第一行相同，this.position就为n，表示向下合并n行；第二行自己就this.spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了啊。
如果第二行与第一行不相等的话，那么this.spanArr.push(1);就让第二行自己独占一行；this.position = index意思就是把指针拿到index这行来，表示设置数组this.spanArr[this.position]的元素值，然后定义从此行开始向下合并几行（可能这句话我表述的不是很清楚你可以根据我这个示例研究下，当index为3时，this.position为3，当index为4时，第四行与第三行需要合并，那么在数组的this.position元素就要+1了，也就是this.spanArr[this.position] += 1）
const _col = _row>0 ? 1 : 0;
定义的这一个单元格列的合并，我们项目只合并行，不合并列；
_row：代表合并行的行数，_row的值要么是1，或者更大的自然正整数，要么是0。
1代表：独占一行
更大的自然数：代表合并了若干行
0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
作者：兰亭古墨
来源：CSDN
原文：/hefeng6500/article/details/82778680
