简介：
el-table单元格合并，处理hover错乱问题，自定义底部合计栏。
如图所示：
源码（复制另存txt，修改.html直接运行）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table</title><!-- 引入样式 --><link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"><style></style></head><body style="background: #eee;"><div id="app"><el-table :data="tableData" border size='mini' show-summary:summary-method="getSummaries":span-method="objectSpanMethod":row-class-name="rowClassName" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave"><el-table-column prop="index" label="序号" width="60"><template slot-scope="scope">{{scope.$index + 1}}</template></el-table-column><el-table-column prop="name" label="召唤师" min-width='100'></el-table-column><el-table-column prop="like" label="喜欢" min-width='80'></el-table-column><el-table-column prop="sex" label="性别" min-width='100'></el-table-column><el-table-column prop="age" label="年龄" min-width='100'></el-table-column><el-table-column prop="big" label="大招" min-width='180'></el-table-column><el-table-column prop="lv" label="等级" min-width='80'></el-table-column><el-table-column prop="hurt" label="伤害" min-width='100'></el-table-column> </el-table></div></body><script src="/vue/2.6.14/vue.js"></script><!-- 引入组件库 --><script src="/element-ui/lib/index.js"></script><script>let time = ''new Vue({el: '#app',data() {return {tableData:[{name:'凯',like:'伽罗',sex:'男',age:'20',big:'魔皇降世：能抗能打',lv:'99',hurt:'10000',},{name:'曜',like:'伽罗',sex:'男',age:'21',big:'七星斩：打不过就跑',lv:'95',hurt:'10000',},{name:'李信',like:'伽罗',sex:'男',age:'19',big:'王非王，侯非侯：1A1A1A',lv:'93',hurt:'10000',},{name:'王昭君',like:'李白',sex:'女',age:'18',big:'和亲抗拒：沉默爆发',lv:'66',hurt:'998',},{name:'杨玉环',like:'李白',sex:'女',age:'19',big:'云想衣裳花想容：超然入圣',lv:'55',hurt:'998',},{name:'伊泽瑞尔',like:'伊泽瑞尔',sex:'男',age:'25',big:'半月斩：代表月亮消灭你',lv:'18',hurt:'1',},],hoverRowLike: -1,}},mounted(){},methods: {//合计 需添加show-summary属性，数组对应行的每列getSummaries(params){return ['合计','自定义展示','自定义展示','10000','10000','10000','10000','10000',]},//合并行objectSpanMethod({row, column, rowIndex, columnIndex }) {//从那些列需要合并，此处是第三列和第八列if (columnIndex === 2 || columnIndex === 7 ) {//查询相同类型首次出现的index位置，like：同一个类型的标识const i = this.tableData.findIndex( n => n.like == row.like )//计算相同类型出现几次let num = 0this.tableData.map(item =>{if(item.like == row.like){num++}})//rowIndex === i：从首次出现行开始，num：需要合并行数if (rowIndex === i) {return {rowspan: num,colspan: 1};} else {return {rowspan: 0,colspan: 0};}}},// 鼠标进入单元格，记录下当前行的likehandleMouseEnter(row, column, cell, event) {this.hoverRowLike = row.like;},// 给相同like的row添加类名rowClassName({row, rowIndex }) {if (row.like === this.hoverRowLike) {return 'hover-row';}},// 鼠标离开handleMouseLeave(row, column, cell, event) {this.hoverRowLike = -1;},}})</script></html>
番外篇：
当爹了，我崽儿快满月了，越看越可爱。
