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)
    })
  }
相关推荐
nbsaas-boot15 分钟前
消息队列场景下的前端设计:如何优化用户体验
前端·ux
sususugaa17 分钟前
前端框架Vue3——响应式数据,v-on,v-show和v-if,v-for,v-bind
开发语言·前端·vue.js·前端框架
珹洺2 小时前
从 HTML 到 CSS:开启网页样式之旅(三)—— CSS 三大特性与 CSS 常用属性
前端·javascript·css·网络·html·tensorflow·html5
T^T尚6 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志6 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3927 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
山猪打不过家猪7 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山7 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生7 小时前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive
对卦卦上心7 小时前
React-useEffect的使用
前端·javascript·react.js