element表格合并，合并后高亮

1.结构

<template>
  <!-- 顶部导航信息 -->
  <el-row class="selectclass"   >
    <el-table
      :data="tableData"
                     @cell-mouse-enter="handleMouse" 
                @cell-mouse-leave="handleMouseLeve" 
              :span-method="handleObjectSpanMethod"
              highlight-current-row 
              tooltip-effect="light" 
              border stripe   
               @row-click="handleRowClick" 
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </el-row>
</template>

2.style

<style lang="scss">
.selectclass{
  //鼠标移上class
   .selection {
      background-color: #87cefa!important;
        td{
            background-color: #87cefa!important;
        }
    }
    //因为elementui表格自带的hover样式和点击样式有渐变
    //我们把渐变去掉
    .el-table--enable-row-transition .el-table__body td {
    -webkit-transition: background-color 0s ease;
    transition: background-color 0s ease;
    }
}
</style>

3.逻辑

<script>
export default {
  watch: {

    
  },
  computed: {

  },
  data() {
 
    return {
      spanData:[],//存合并规则
      indexpushList:[],
      newRow:{},
      trs:'',//点击表格，存节点,初始化值必须是 ''
      hovertrs:'',//鼠标移上，存节点，初始化必须是 ''
      pos:null,//计算表格行所需变量
      tableData: [{
            date: '2016-05-02',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    };
  },

  methods: {
    //清空鼠标移上class
    removeClass(){
      this.$nextTick(()=> {
                for (let i=0; i <this.tableData.length ; i++) {
                  if(this.hovertrs[i].className!==null){
                      this.hovertrs[i].classList.remove('selection');
                  }
                }
      })
    },
    //清空选中行class
    clearClassName(){
      for(var j=0;j<this.trs.length;j++){
        // console.log(this.trs[j].className)
          if(this.trs[j].className.toString().indexOf('current-row')>-1){
              this.trs[j].classList.remove('current-row');
          }
      }
    },

    //鼠标移出事件
    handleMouseLeve () {
          this.removeClass()
    },
  // 鼠标移入事件
  handleMouse (row, column, cell, event) {
      var index1=row.index
      if(this.hovertrs===''&&event.path[2].innerHTML.indexOf('<tr')>-1&&event.path[1].nextSibling.className!==null){
          this.hovertrs=event.path[1].parentNode.children
      }
      if(this.spanData[index1]>1){
        // 清空class
        this.removeClass()
        this.$nextTick(()=> {
            for (let i=index1; i <index1+this.spanData[index1] ; i++) {
              if(this.hovertrs[i]&&this.hovertrs[i].className!==null){
                  this.$nextTick(()=> {
                    // if((i/2).toString().indexOf('.')==-1){
                    // }else{
                        this.hovertrs[i].classList += ' selection';
                    // }
                  })
              }
            }
        })
      }else if(this.spanData[index1]==1){
        this.removeClass()
        this.$nextTick(()=> {
              if(this.hovertrs[index1]&&this.hovertrs[index1].className!==null){this.hovertrs[index1].classList += ' selection';}
        })
      }else if(this.spanData[index1]==0){
        this.removeClass()
        this.$nextTick(()=> {
            var setclasslength=0//0向前找
            var starIndex=0
            for (let index = index1-1; index >-1 ; index--) {
              if(this.spanData[index]>0&&starIndex==0){
                setclasslength=this.spanData[index]
                starIndex=index
              }
            }
            for (let i=starIndex; i <starIndex+setclasslength ; i++) {
              if(this.hovertrs[i].className!==null){
                    // if((i/2).toString().indexOf('.')==-1){
                    // }else{
                        this.hovertrs[i].classList += ' selection';
                    // }
              }
            }
            
        })
      }
  },
    //点击行触发
    handleRowClick(row, column, event) {
      var rows=[row]//this.spanData
      var index1=row.index
      this.clearClassName()
              if(event.path[2].innerHTML.indexOf('<tr')>-1&&event.path[1].nextSibling.className!==null){
                this.trs=event.path[1].parentNode.children
              }else if(event.path[2].nextSibling.className!==null){
                this.trs=event.path[2].parentNode.children
              }
      if(this.spanData[index1]>1){
        this.$nextTick(()=> {
            for (let i=index1; i <index1+this.spanData[index1] ; i++) {
              if(this.trs[i].className!==null){
                  this.$nextTick(()=> {
                    this.trs[i].classList += ' current-row';
                  })
              }
            }
        })
      }else if(this.spanData[index1]==1){
        
        this.$nextTick(()=> {
              this.trs[index1].classList += ' current-row';
        })
      }else if(this.spanData[index1]==0){
        this.$nextTick(()=> {
            var setclasslength=0//0向前找
            var starIndex=0
            for (let index = index1-1; index >-1 ; index--) {
              if(this.spanData[index]>0&&starIndex==0){
                setclasslength=this.spanData[index]
                starIndex=index
              }
            }
            for (let i=starIndex; i <starIndex+setclasslength ; i++) {
              if(this.trs[i].className!==null){
                  this.trs[i].classList += ' current-row';
              }
            }
            
        })
      }
      this.newRow = row;
    },
    // 表格合并
    // 计算需要合并的单元格
    getSpanData(data) {
      // 存放计算好的合并单元格的规则
      this.spanData = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
        this.spanData.push(1)
        this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同（以data中的name做对比）
          if (data[i].name == data[i - 1].name) {
            this.spanData[this.pos] += 1
            this.spanData.push(0)
          } else {
            this.spanData.push(1)
            this.pos = i
          }
        }
      }
            console.log(this.spanData)

    },
    // 合并单元格
    handleObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //columnIndex合并几列，这里代表的是合并name的那列，0列
      if (columnIndex < 1) {
        const _row = this.spanData[rowIndex]
        // console.log('_row',_row)
        const _col = _row > 0 ? 1 : 0
        return {
        rowspan: _row,
        colspan: _col
        }
      }
    },
  },
  mounted() {
    // 为数组添加index方便处理
    var indexpushList=[]
    var newlist=[...this.tableData]
    newlist.forEach((item,index)=>{
            indexpushList.push({...item,'index':index})
   })
   this.tableData=indexpushList
   this.getSpanData(this.tableData)
  }
}
</script>

表格合并的是我看的别人的，选中高亮和鼠标移上高亮是我自己写的。
表格合并原文链接
https://blog.csdn.net/qq_37932700/article/details/103052810