elementUI官方文档的表格合并方法为 span-method
// Table 组件 绑定 span-method <Table :data="tableData" :span-method="cellMerge" > data(){ return { spanArr: [], pos: 0, tableData:[ {game_id: 2,game_name: "王者荣耀", scene_id: "2-32-1"）}， {game_id: 2,game_name: "王者荣耀", scene_id: "2-32-1"）}, {game_id: 3,game_name: "和平精英", scene_id: "2-32-1"）}， {game_id: 4,game_name: "地下城与勇士", scene_id: "2-32-1"）}, {game_id: 5,game_name: "黎明觉醒", scene_id: "2-32-1"）}， {game_id: 5,game_name: "黎明觉醒", scene_id: "2-32-1"）}, ] } }, watch：{ tableData(val){ this.getSpanArr(val) //监控tableData 的变化 实时更新合并结果 } } methods:{ cellMerge({ row, column, rowIndex, columnIndex }) { // 指定合并表格从那一列开始 columnIndex === 0 表示表格的第一列 if (columnIndex === 0 || columnIndex === 9 || columnIndex === 1) { const _row = this.spanArr[rowIndex]; // 一般表格的渲染都是通过接口获取到的，具体的合并情况需要根据表格的信息tableData而定, 那么就要循环tableData 数组判断具体的参数 const _col = _row > 0 ? 1 : 0; return { rowspan: _row, // _row === 3 时 表示向下合并两个元素，加上自己就代表合并前的三个元素 colspan: _col // _col === 1时 表示保留 _col === 0 时表示删除 } } }, getSpanArr(data) { // 以game_id 为例，将game_id相同的单元格向下合并 如上tableData 通过getSpanArr处理后得到 spanArr = [2,0,1,1,2,0] 2表示向下合并1个单元 格，0表示被合并了需要删除，1表示保持原样不变 for (var i = 0; i < data.length; i++) { if (i === 0) { this.spanArr.push(1) this.pos = 0 } else { // 判断当前元素与上一个元素是否相同 if (data[i].game_id === data[i - 1].game_id) { this.spanArr[this.pos] += 1; this.spanArr.push(0); } else { this.spanArr.push(1); this.pos = i; } }, }