问题描述
在固定最后一列的情况下,el-table在页面切换显示后在表格右下方出现横线问题
问题原因
这种情况有时在宽度刚好处于临界值状态时会出现。因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行出现横线被遮挡。
解决方式(一)
在官方文档中发现了这个方法
如果直接调用doLayout()在typescript中会类型检测报错,需要获取ElTable对象类型再调用。但如果使用js,则可以正常调用。
在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;
}