Ant-Design-Vue中Table使用固定列后行之间对不齐的问题解决

一、产生原因

由于需求要求固定列这个字段要进行2行的折行，所以进行了自定义样式的控制，这样导致固定列有些行高度和主表格高度不一致，导致塌陷，官网要求是不能折行的

二、查看table组件固定列实现方案

有三个表格组成，主控表格，左侧固定、右侧固定，经过一系列测试，再窗口出现横向滚动条的时候，对齐方式良好，找出源码对应的滚动事件
node_modules/ant-design-vue/es/vc-table/src/Table.js
if (window.navigator.userAgent.match(/Trident/7./) && scroll.y)

三、修改窗口变更相关代码

经过一列表的源码查看和跟踪，找到窗口变更控制或表格更新、选择复选框等，都会执行的resize函数

实现方案、显示原始数据和固定列的切换

隐藏左右固定列查看页面效果，开始以为是把内容删掉了，审查元素内容还在只是被隐藏了

global.less添加样式显示原始内容，这样在大屏情况，不需要左右锁定列去滚动查看内容，也就不会涉及到内容对不齐的问题

/*表格固定列样式内容显示*/
.ant-table-scroll table .ant-table-fixed-columns-in-body:not([colspan]) > *{
  visibility: visible;
}
/*显示固定列隐藏的字体颜色*/
.ant-table-scroll table .ant-table-fixed-columns-in-body:not([colspan]) {
  color: @text-color;
}

代码实现

代码判断出现横向滚动条的时候去显示固定列出来，否则隐藏掉

syncFixedTableRowHeight: function syncFixedTableRowHeight() {
  var tableRect = this.tableNode.getBoundingClientRect();
  // If tableNode's height less than 0, suppose it is hidden and don't recalculate rowHeight.
  // see: https://github.com/ant-design/ant-design/issues/4836
  if (tableRect.height !== undefined && tableRect.height <= 0) {
    return;
  }
  var prefixCls = this.prefixCls;

  var headRows = this.ref_headTable ? this.ref_headTable.querySelectorAll('thead') : this.ref_bodyTable.querySelectorAll('thead');
  var bodyRows = this.ref_bodyTable.querySelectorAll('.' + prefixCls + '-row') || [];
  var bodyTableParentNode = this.ref_bodyTable.parentNode.parentNode
  //获取固定列的行
  var fixedColumnsBodyLeft = this.ref_fixedColumnsBodyLeft;
  var fixedColumnsBodyRight = this.ref_fixedColumnsBodyRight;
  //判断是否出现横向滚动条，没有的时候把原来的数据显示出来，隐藏固定列，做相反操作
  var hasHorizontalScrollbar = this.ref_bodyTable.clientWidth < this.ref_bodyTable.scrollWidth
  if (typeof fixedColumnsBodyLeft!=='undefined'){
    if (hasHorizontalScrollbar){
      bodyTableParentNode.querySelector('.ant-table-fixed-left').style.display = '';
    }else {
      bodyTableParentNode.querySelector('.ant-table-fixed-left').style.display = 'none';
    }
  }
  if (typeof fixedColumnsBodyRight!=='undefined'){
    if (hasHorizontalScrollbar){
      bodyTableParentNode.querySelector('.ant-table-fixed-right').style.display = '';
    }else{
      bodyTableParentNode.querySelector('.ant-table-fixed-right').style.display = 'none';
    }
  }
  var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
    return row.getBoundingClientRect().height ? row.getBoundingClientRect().height - 0.5 : 'auto';
  });
  var state = this.store;
  var fixedColumnsBodyRowsHeight = [].reduce.call(bodyRows, function (acc, row, index) {
    var rowKey = row.getAttribute('data-row-key');
    var height = row.getBoundingClientRect().height || state.fixedColumnsBodyRowsHeight[rowKey] || 'auto';
    acc[rowKey] = height;
    return acc;
  }, {});
  if (shallowequal(state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && shallowequal(state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
    return;
  }
  this.store.fixedColumnsHeadRowsHeight = fixedColumnsHeadRowsHeight;
  this.store.fixedColumnsBodyRowsHeight = fixedColumnsBodyRowsHeight;
},

四、选中行问题修改

不修改的话，也会导致内容滚动有些卡顿感
node_modules/ant-design-vue/es/vc-table/src/BaseTable.js
添加样式

.ant-table-row-hover td{background: #e6f7ff!important;}

注释掉原有代码，添加如下内容

handleRowHover: function handleRowHover(isHover, key) {
      // this.store.currentHoverKey = isHover ? key : null;
      var elements = document.querySelectorAll('.ant-table-row-hover');
      for (var i = 0; i < elements.length; i++) {
        elements[i].classList.remove('ant-table-row-hover');
      }
      document.querySelectorAll("[data-row-key='"+key+"']").forEach(item=>{
        item.classList.add('ant-table-row-hover');
      })
    },

五、使用patch-package保存node_modules包修改

1、如何生成补丁

如何修改node_modules源码？
首先，我们能想到的思路是直接修改第三方库的代码，不过这会带来团队协作的问题，你的改动需要同步到团队所有成员，比较麻烦。
好在，我们可以使用 patch-package 这个库来解决这类问题。一方面，它能记录第三方库代码的改动，另一方面也能将改动同步到团队每个成员。

npm i -D patch-package

修改源码后进行生成补丁包 npx patch-package 你的包名字

npx patch-package ant-design-vue

给package.json添加个脚本

2、补丁测试

删除node_modules目录，然后重新运行npm install，安装完成后，查看你修改的node_modules里面的代码是否还在。如果在，就说明补丁生效了。

六、提交补丁代码

将补丁文件提交到远程，这样其他同事就拉取后，再执行npm install，就可以看到你修改的代码了

七、线上环境打包

npm run postinstall
npm i
npm run build