问题描述

在固定最后一列的情况下，el-table在页面切换显示后在表格右下方出现横线问题

bug1显示.png

问题原因

这种情况有时在宽度刚好处于临界值状态时会出现。因为固定列是独立于表格body动态计算高度的，出现了固定列高度小于表格高度所以造成最后一行出现横线被遮挡。

解决方式（一）

在官方文档中发现了这个方法

参考.png

如果直接调用doLayout()在typescript中会类型检测报错，需要获取ElTable对象类型再调用。但如果使用js，则可以正常调用。

bug2显示.png

在typescript中完整代码如下

<template>
  <div class="page-table">
    <el-table ref="elTable"></el-table>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onActivated, nextTick } from 'vue'
  import { ElTable } from 'element-plus'

  export default defineComponent ({
    setup() {
      const elTable = ref<InstanceType<typeof ElTable>>()
      // 因为该组件在父页面中使用了keep-alive，因此通过onActivated来调用；当然也可以使用onMounted
      onActivated(() => {
        nextTick(() => {
          // 解决el-table抖动bug
          // 在页面渲染后调用该方法重新布局表格
          elTable.value?.doLayout()
        })
      })

      return {
        elTable
      }
    }
  });
</script>

解决方式（二）

设置全局样式

.el-table__fixed-right {
  height: 100% !important;
}