element问题总结之el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位问题

el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位

效果图

前言

在使用el-table固定行的时候移动滚动条会发现移动到底部或者移动到最右侧的时候会出现表头和内容错位或者是固定列的内容错位的情况

解决方案

纵向滑动滚动条滑动到底部的错位解决

javascript 复制代码
::v-deep.el-table .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__body {
      padding-bottom: 10px!important;
}

横向滚动条滑动到最右侧的错位解决

javascript 复制代码
watch: {
  // dataList为table的数据对象data
  dataList() {
    // 解决横向滚动时,列没对齐的问题
    this.$nextTick(() => {
      setTimeout(() => {
        let lastColEl = document.querySelector('.el-table__header colgroup col:last-child')
        if (lastColEl) {
          // 最后一列的宽度加上滚动条的宽度
          lastColEl.width = Number(lastColEl.width) + 6 // 6为滚动条宽度
        }
      }, 1000)
    })
  }
相关推荐
江城开朗的豌豆1 天前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了1 天前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css
江城开朗的豌豆1 天前
解密DVA:React应用的状态管理利器
前端·javascript·react.js
带娃的IT创业者1 天前
《Python Web部署应知应会》No3:Flask网站的性能优化和实时监测深度实战
前端·python·flask
weixin_431600441 天前
使用 vue-virtual-scroller 实现高性能传输列表功能总结
前端·javascript·vue.js
OEC小胖胖1 天前
App Router vs. Pages Router:我应该如何选择?
开发语言·前端·前端框架·web·next.js
前端 贾公子1 天前
《Vuejs设计与实现》第 16 章(解析器) 上
vue.js·flutter·ios
Wiktok1 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
陆康永1 天前
弹窗分页保留其他页面勾选的数据(vue)
前端·javascript·vue.js
IT_陈寒1 天前
Vite 5.0重磅升级:8个性能优化秘诀让你的构建速度飙升200%!🚀
前端·人工智能·后端