自定义指令解决elementUI中table组件的column设置fixed属性后，滚动时表格无法对齐的问题

如果遇到Element UI的Table组件中使用fixed属性后，滚动时表格内容无法正确对齐的问题，可能是因为自定义指令没有正确处理这种情况。

解决方案通常涉及到监听滚动事件，并在事件回调中更新固定列的样式或者重新计算位置。以下是一个简单的自定义指令示例，用于修复Element UI中fixed属性引起的滚动对齐问题：

Vue.directive('fixTableColumn', {
  inserted(el) {
    const tableBody = el.querySelector('.el-table__body-wrapper');
    const tableHeader = el.querySelector('.el-table__header-wrapper');
    if (tableBody && tableHeader) {
      tableBody.addEventListener('scroll', syncScroll);
      tableHeader.addEventListener('scroll', syncScroll);
 
      function syncScroll() {
        const scrollLeft = this.scrollLeft;
        tableBody.scrollLeft = scrollLeft;
        tableHeader.scrollLeft = scrollLeft;
      }
    }
  },
  unbind(el) {
    const tableBody = el.querySelector('.el-table__body-wrapper');
    const tableHeader = el.querySelector('.el-table__header-wrapper');
    if (tableBody && tableHeader) {
      tableBody.removeEventListener('scroll', syncScroll);
      tableHeader.removeEventListener('scroll', syncScroll);
    }
  }
});

在你的Vue组件中，只需要在<el-table>上使用这个自定义指令：

<el-table v-fix-table-column>
  <!-- your table columns -->
</el-table>

这段代码定义了一个名为v-fix-table-column的自定义指令，它会在表格插入到DOM后监听表头和表格体的滚动事件，并同步它们的滚动位置，以修复因fixed属性引起的对齐问题。记得在Vue实例化之前注册这个指令。