elementUI el-table设置fixed后，竖向滚动条滚动到底部表格错位的问题（修改源码）

问题：el-table在设置了fixed的条件下，滚动竖向滚动条到最底部的时候，会出现表格错位的问题。
原因：fixed部分也是一个表格，在有滚动条的时候没有加上滚动条的高度，所以会导致错位。
通过阅读源码发现，fixed表格的高度取得是fixedBodyHeight

可以看出来 fixed表格的高度取得是表格的高度减去竖向滚动条的宽度，

每次改变列的宽度后，会调用
debouncedUpdateLayout事件

而dolayout事件会重新计算fixed的高度，这时候我们可以看到，在设置fixed高度时候，此时的this.scrollx是改变列宽前的值，而我们需要的是改变列宽后scrollX的值。所以此时会有错位的问题。

解决方案：手动调用table内置方法，获取到改变列宽后的scrollX的值
this.$refs.table.doLayout();
1.请求完数据之后，手动调用doLayout方法

headerDragendHandle() {this.$refs.table.doLayout();},

2.如果设置了border，拖动完列宽后，也需要调用此方法

  @header-dragend="headerDragendHandle"

3.监听元素变化，表格元素变化之后，也需要调用此方法

    const resizeObserver = new ResizeObserver(() => {this.headerDragendHandle();});resizeObserver.observe(this.$refs.tableComponent);this.$once("hook:beforeDestroy", () => {resizeObserver.unobserve(this.$refs.tableComponent);});

elementUI el-table设置fixed后，竖向滚动条滚动到底部表格错位的问题（修改源码）相关推荐

el-table中设置fixed后表格错位
el-table中设置fixed后表格错位表格错位图片代码表格错位图片图片: 错位原因: 在设置fixed后,横向的滚动条的高度没有占用设置了fixed属性列的高度,导致每次Y轴的滚动条滑动到 ...
el-table的动态表头设置fixed后对不齐的问题
问题:动态表头设置fixed后最后一列平铺展开后对不齐往下了一点的问题? 原因是el-table-column设置了固定宽度width: 解决方法: 1.this.$nextTick(() => ...
ElementUI 的 el-select 设置值后显示value而不是label
问题: ElementUI 的 el-select 设置值后显示value而不是label 关键是这里: <el-option label="在职" value=" ...
Jar包反编译后修改源码再编译
Jar包反编译后修改源码再编译文章目录 Jar包反编译后修改源码再编译 1. 场景 2. 详细步骤 2.1 查看源码 2.2 生成源文件 2.3 构建项目 2.4 编译成jar包 3. 参考链接 1 ...
vue+elementUI实现sku表格自动生成【效果图+源码】
vue+elementUI实现sku表格自动生成[效果图+源码] 先看一看效果图: 点击这里下载源码,下载后记得安装依赖:npm install
关于div的滚动条滚动到底部，内容显示不全的问题。（已解决）
关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) 参考文章: (1)关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) (2)https://www.cnblogs.com/th ...
node操作excel9 node-xlsx设置单元格行高（需要修改源码）
目录背景设置单元格行高修改源码 1.修改node_modules/node-xlsx/lib/helpers.js文件 2.修改node_modules/xlsx-style/
编译安装gcc-4.8.2(编译出错后修改源码编译成功)
记录下载 wget ftp://ftp.gnu.org/gnu/gcc/gcc-4.8.5/gcc-4.8.5.tar.gz 解压下载依赖 tar zxf gcc-4.8.5.tar.gz cd ...
el-table使用fixed后，最后一行显示不全；el-table设置fixed后，最后一行被遮挡。
解决代码: .el-table {/deep/ .el-table__body-wrapper {overflow-x: scroll !important;//直接设置横轴内容滚动条即可撑高高度 ...

elementUI el-table设置fixed后，竖向滚动条滚动到底部表格错位的问题（修改源码）

elementUI el-table设置fixed后，竖向滚动条滚动到底部表格错位的问题（修改源码）相关推荐

最新文章

热门文章