修改源码，element的el-table合并，处理合并产生的hover样式问题

1、确认自己element-ui的版本号

2、此element-ui下的lib包是修改过hover样式的包，如何替换自己文件下的node_modules中的包

修改后将lib文件夹中文件替换你项目中/node_module/element-ui/Lib中的文件

问题？？如果替换开发环境中的node_module的包无法升级到测试环境，因为node_module中的包只在你本地

解决办法：需要将代码拷贝到本地分支，修改table文件，然后一起提交

如果不使用element打包之后的lib文件，就进行以下操作

1、在github中找到element-ui的源码，克隆到本地，直接修改。

el-table合并行hover显示问题

作者解决前显示的问题，如下两张图片

作者解决后如下

2、最后产品想要的效果，需求：不区分每一行，只要移入到合并的行，都需要背景颜色

3、需要源码变动的替换下边两个文件

3.1、table/src/table-row.js文件

bash 复制代码

import ElCheckbox from 'element-ui/packages/checkbox';
export default {
  name: 'ElTableRow',
  props: [
    'columns',
    'row',
    'index',
    'isSelected',
    'isExpanded',
    'store',
    'context',
    'firstDefaultColumnIndex',
    'treeRowData',
    'treeIndent',
    'columnsHidden',
    'getSpan',
    'getColspanRealWidth',
    'getCellStyle',
    'getCellClass',
    'handleCellMouseLeave',
    'handleCellMouseEnter',
    'fixed',
    'recordRowIndexMap'
  ],
  components: {
    ElCheckbox
  },
  render() {
    const {
      columns,
      row,
      index: $index,
      store,
      context,
      firstDefaultColumnIndex,
      treeRowData,
      treeIndent,
      columnsHidden = [],
      isSelected,
      isExpanded
    } = this;
    const currentRowIndex = $index + '';
    this.recordRowIndexMap[currentRowIndex] = { maxRowSpen: 0, maxColSpen: 0, distanceAndParallelCoordinates: 0}; // maxRowSpen：当前行中，找出合并的行数， distanceAndParallelCoordinates： 距合并行坐标位置， 当前行是1，那么距离上一合并行的位置是一
    return (
      <tr>
        {
          columns.map((column, cellIndex) => {
            const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
            if (!rowspan || !colspan) {
              const { maxColSpen } = this.recordRowIndexMap[$index];
              if (maxColSpen >= 1) {
                this.recordRowIndexMap[$index].distanceAndParallelCoordinates = 0; // 获取距离上一合并行的坐标0 --- 10
                this.recordRowIndexMap[$index].maxRowSpen = 1; // 获取上一行合并行数
                return null;
              }
              const { distanceAndParallelCoordinates, maxRowSpen } = this.recordRowIndexMap[$index - 1];
              this.recordRowIndexMap[$index].distanceAndParallelCoordinates = distanceAndParallelCoordinates + 1; // 获取距离上一合并行的坐标0 --- 10
              this.recordRowIndexMap[$index].maxRowSpen = maxRowSpen; // 获取上一行合并行数
              return null;
            }

            const { maxRowSpen, maxColSpen } = this.recordRowIndexMap[currentRowIndex];
            if (maxRowSpen < rowspan) {
              this.recordRowIndexMap[currentRowIndex]['maxRowSpen'] = rowspan;
            }

            if (maxColSpen < colspan) {
              this.recordRowIndexMap[currentRowIndex]['maxColSpen'] = colspan;
            }

            const columnData = { ...column };
            columnData.realWidth = this.getColspanRealWidth(columns, colspan, cellIndex);
            const data = {
              store,
              isSelected,
              isExpanded,
              _self: context,
              column: columnData,
              row,
              $index
            };
            if (cellIndex === firstDefaultColumnIndex && treeRowData) {
              data.treeNode = {
                indent: treeRowData.level * treeIndent,
                level: treeRowData.level
              };
              if (typeof treeRowData.expanded === 'boolean') {
                data.treeNode.expanded = treeRowData.expanded;
                // 表明是懒加载
                if ('loading' in treeRowData) {
                  data.treeNode.loading = treeRowData.loading;
                }
                if ('noLazyChildren' in treeRowData) {
                  data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
                }
              }
            }

            const { startRow = -1, endRow = -1 } = store.states.hoverState;
            const cellStartRow = $index;
            const cellEndRow = cellStartRow + rowspan - 1;

            const isHover = cellStartRow <= endRow && cellEndRow >= startRow;

            const cellMouseEnterStartRow = $index - this.recordRowIndexMap[$index].distanceAndParallelCoordinates;
            const cellMouseEnterRowSpan = this.recordRowIndexMap[currentRowIndex]['maxRowSpen'];
            return (
              <td
                style={this.getCellStyle($index, cellIndex, row, column)}
                class={this.getCellClass($index, cellIndex, row, column, isHover)}
                rowspan={rowspan}
                colspan={colspan}
                on-mouseenter={($event) => this.handleCellMouseEnter($event, row, cellMouseEnterStartRow, cellMouseEnterRowSpan)}
                on-mouseleave={this.handleCellMouseLeave}
              >
                {
                  column.renderCell.call(
                    this._renderProxy,
                    this.$createElement,
                    data,
                    columnsHidden[cellIndex]
                  )
                }
              </td>
            );
          })
        }
      </tr>
    );
  }
};

3.2、table/src/table-body.js文件引入，并在TableRow中配置这条属性
import { cellStarts } from './config.js';
recordRowIndexMap: {} 为对象

问题？修改完之后存在的问题，当点击表格的时候，样式还需要再处理，有问题的效果如下，待优化

解决方案：跟修改hover时的样式一样，找 current-row 这个类名