element（table） + vue 实现动态合并单元格 + hover +点击 样式改变

原效果图

要求效果图

详细说明：

rowspan（）这个函数就是用来返回 spanArr 数组的，定义每一行的 rowspan

if( index === 0)，第一行，直接先给数组 push 进一个1，表示自己先占一行，position 是数组元素的位置
（此时是从数组元素的第一个开始，所以position 为 0）， position为 0 意思表示的就是数组的第一个元素。

当到了 index 为 2 的时候，if(this.listData[index][spanName] === this.listData[index-1][spanName])，
让第二行与第一行作比较：
（1）如果第二行与第一行相等的话，position 就 +1，当有 n 行第一行相同，position 就为 n，表示向下合并 n 行；
第二行自己就 spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了；
（2）如果第二行与第一行不相等的话，那么 spanArr.push(1);就让第二行自己独占一行；

position = index ：把指针拿到 index 这行来，表示设置数组 spanArr[position] 的元素值，然后定义从此行开始向下合并几行
（可以根据示例研究下，当 index 为 2 时，position 为 2，当 index 为 3 时，第四行与第三行需要合并，
那么在数组的 position 元素就要 +1 了，也就是 spanArr[position] += 1）


:span-method="objectSpanMethod" 

这个是官方给定的绑定属性和对应的方法，objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
row: 当前行
column: 当前列
rowIndex：当前行号
columnIndex ：当前列号

该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表 colspan。
也可以返回一个键名为 rowspan 和 colspan 的对象。

const _col = _row > 0 ? 1 : 0;  定义的这个单元格列的合并，我们项目只合并行，不合并列；

_row：代表合并行的行数，_row 的值要么是 1，或者更大的自然正整数，要么是 0。
1代表：独占一行
更大的自然数：代表合并了若干行
0：代表“消失”的哪那一个单元格，后面的单元格向前推一格

实现方式：
html：

 <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        stripe
        class="znv-table tableLimit"
        height="100%"
        highlight-current-row
        :row-class-name="rowClassName"
        @cell-mouse-enter="enter" 
        @cell-mouse-leave="leave" 
        @cell-click="cellClick"
        style="width: 100%"
      >
      <!--
       重要部分！！！！！
		:row-class-name="rowClassName" //行的样式的回调
        @cell-mouse-enter="enter" // 鼠标移入
        @cell-mouse-leave="leave"  // 鼠标移出
-->
		<el-table-column
          align="center"
          prop="stationName"
          label="地市/区域"
          min-width="110"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>

js

//data 中数据
data() {
    return {
      tableData: [],//表格数据
      testArr1: [],//用于动态合并
      testArr2: [],//用于动态合并
      testArr3: [],//用于动态合并
      testArr4: [],//用于动态合并
      testArr5: [],//用于动态合并
      testPosition1: 0,//用于动态合并
      testPosition2: 0,//用于动态合并
      testPosition3: 0,//用于动态合并
      testPosition4: 0,//用于动态合并
      testPosition5: 0,//用于动态合并
      resultData: [],//用于hover改变颜色的数组
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
  //获取后端的数据
    getTableData() {
    //注！！
    //每次进来之前清空一下testArr1 这几个数组
      this.tableData = [
        {
          id: "201808300001",
          stationName: "1",
          loadRate: 60,
          usedCapacity: "上衣",
          ratedCapacity: "80",
          backupMode: "2018-08-30",
        },
        {
          id: "201808300002",
          stationName: "1",
          loadRate: 20,
          usedCapacity: "裤子",
          ratedCapacity: "76",
          backupMode: "2018-08-31",
        },
        {
          id: "201808300003",
          stationName: "2",
          loadRate: 30,
          usedCapacity: "挎包",
          ratedCapacity: "150",
          backupMode: "2018-08-31",
        },

        {
          id: "201808300004",
          stationName: "2",
          loadRate: 30,
          usedCapacity: "鞋子",
          ratedCapacity: "76",
          backupMode: "2018-08-29",
        },
        {
          id: "201808300005",
          stationName: "3",
          loadRate: 40,
          usedCapacity: "旗袍",
          ratedCapacity: "106",
          backupMode: "2018-08-31",
        },
        {
          id: "201808300006",
          stationName: "3",
          loadRate: 40,
          usedCapacity: "短裙",
          ratedCapacity: "36",
          backupMode: "2018-08-30",
        },
        {
          id: "201808300007",
          stationName: "4",
          loadRate: 50,
          usedCapacity: "短袖",
          ratedCapacity: "36",
          backupMode: "2018-08-30",
        },
        {
          id: "201808300008",
          stationName: "4",
          loadRate: 50,
          usedCapacity: "短袖",
          ratedCapacity: "36",
          backupMode: "2018-08-30",
        },
        {
          id: "201808300009",
          stationName: "5",
          loadRate: 60,
          usedCapacity: "钱包",
          ratedCapacity: "60",
          backupMode: "2018-08-30",
        },
        {
          id: "201808300011",
          stationName: "6",
          loadRate: 70,
          usedCapacity: "手套",
          ratedCapacity: "60",
          backupMode: "2018-08-30",
        },
        {
          id: "201808300012",
          stationName: "9",
          loadRate: 70,
          usedCapacity: "袜子",
          ratedCapacity: "36",
          backupMode: "2018-08-30",
        },
        {
          id: "201808300013",
          stationName: "9",
          loadRate: 80,
          usedCapacity: "雪碧",
          ratedCapacity: "5",
          backupMode: "2018-08-31",
        },
        {
          id: "201808300014",
          stationName: "9",
          loadRate: 90,
          usedCapacity: "风衣",
          ratedCapacity: "50",
          backupMode: "2018-08-31",
        },
      ];
      //想要合并几列 就写几个  比如我这个是前5列都是需要动态合并
      //调用表格合并的方法
      this.rowspan(this.testArr1, this.testPosition1, "stationName");
      this.rowspan(this.testArr2, this.testPosition2, "loadRate");
      this.rowspan(this.testArr3, this.testPosition3, "usedCapacity");
      this.rowspan(this.testArr4, this.testPosition4,"ratedCapacity");
      this.rowspan(this.testArr5, this.testPosition5, "backupMode");
    },
    //表格合并的方法
    rowspan(spanArr, position) {
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
          position = 0;
        } else {
        //这块判断的是 stationName 是一个唯一值 根据他合并对应的数据
          if (
            this.tableData[index]["stationName"] ===
            this.tableData[index - 1]["stationName"]
          ) {
            spanArr[position] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            position = index;
          }
        }
      });
    },
    // 表格合并行
    objectSpanMethod({ rowIndex, columnIndex }) {
    //合并第一列的数据 就columnIndex === 0 第二行就是1 以此类推  索引
      if (columnIndex === 0) {
        const _row = this.testArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 1) {
        const _row = this.testArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 2) {
        const _row = this.testArr3[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 3) {
        const _row = this.testArr4[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 4) {
        const _row = this.testArr5[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    //鼠标划入样式
    enter(row) {
      let table = this.tableData;
      //过滤相同的数据
      let result = table.filter((item) => {
        return item.stationName == row.stationName;
      });
      this.resultData = result;
    },
    //点击
    cellClick(row) {
      let table = this.tableData;
      let result = table.filter(item => {
        return item.stationName == 	row.stationName;
      });
      this.clickData = result;
    },
    // 给相应的rowIndex添加类名
    rowClassName({ row, rowIndex }) {
      let r = -1;let d = -2;
      this.resultData.forEach((item) => {
        if (item.stationName === row.stationName) {
          r = rowIndex;
        }
      });
      this.clickData.forEach(item => {
        if (item.stationName === row.stationName) {
          r = rowIndex;
        }
      });
      if (rowIndex === r) {
        return "hover-row";
      }else if (rowIndex === d) {
        return "current-row";
      }
    },
    //鼠标划出 清空样式
    leave() {
      this.resultData = [];
    },

<el-table
      :data="tableData"
      border
      stripe
      :reserve-selection="true"
      style="width: 100%"
      :header-cell-style="rowClass"
      @selection-change="selectionChange"
      @select="select"
      @row-click="rowClick"
      :span-method="objectSpanMethod"
      :row-class-name="rowClassName"
      ref="tableRef"
    >

data(){
return {
mergeObj: {}, // 用来记录需要合并行的下标
mergeArr: ['workMatters', 'jobContent'] ,// 表格中的列名
tableData: [
        {
          workMatters: '工作事项1',
          jobContent: '工作内容合并1',
          jobRequirement: '工作内容1',
          effective: '0'
        },
        {
          workMatters: '工作事项1',
          jobContent: '工作内容合并1',
          jobRequirement: '工作内容2',
          effective: '0'
        },
        {
          workMatters: '工作事项1',
          jobContent: '工作内容合并2',
          jobRequirement: '工作内容2',
          effective: '0'
        },
        {
          workMatters: '工作事项2',
          jobContent: '工作内容合并3',
          jobRequirement: '工作内容2',
          effective: '0'
        },
      ],
}
},
mounted(){
this.getSpanArr(this.tableData)
}
methods:{
 // getSpanArr方法
    getSpanArr(data) {
      this.mergeArr.forEach((key, index1) => {
        let count = 0; // 用来记录需要合并行的起始位置
        this.mergeObj[key] = []; // 记录每一列的合并信息
        data.forEach((item, index) => {
          // index == 0表示数据为第一行，直接 push 一个 1
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
            if (item[key] === data[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              // 如果当前行和上一行其值不相等 
              count = index; // 记录当前位置 
              this.mergeObj[key].push(1); // 重新push 一个 1
            }
          }
        })
      })
    },
    // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 判断列的属性
      if (this.mergeArr.indexOf(column.property) !== -1) {
        // 判断其值是不是为0 
        if (this.mergeObj[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    }

后面新加的参考地址：https://www.jb51.net/article/264848.htm

参考次链接 自己改装加以更新hover以及点击事件