element 表格fixed列高度无法100%

复制代码
下文提到的滚动条皆为横向滚动条

错误方法(旧方法,点击查看旧博客

一下代码虽然能解决fixed列高度无法100%问题,但是会出现fixed列下面的滚动条无法被点击的问题(被fixed列遮挡),所以该方法并不适用

js 复制代码
 .el-table__fixed-right,.el-table__fixed {
    height: calc(100% - 17px) !important; 
    // 默认设置高度,17px为滚动条默认高度,如改变滚动条样式需写入自己改变的滚动条样式高度
  }
  .is-scrolling-none ~ .el-table__fixed-right{ // 无滚动条
    height: 100% !important; // 高度设置为100%
  }
  .is-scrolling-none ~ .el-table__fixed { // 无滚动条
    height: 100% !important; // 高度设置为100%
  }
复制代码
以下两个方法为正确用法,方法二更简单

方法一

将无滚动条时fixed列高度设置为100%,如果有滚动条则设置高度为100%减去滚动条高度

js 复制代码
  .el-table__body-wrapper::-webkit-scrollbar { // 滚动条高度
     height: 17px;
   }
   .el-table__fixed-right,.el-table__fixed { // 有滚动条高度减去17px
     height: calc(100% - 17px) !important;
   }
   .is-scrolling-none ~ .el-table__fixed-right{ // 无滚动条,高度设置为100%
     height: 100% !important;
   }
   .is-scrolling-none ~ .el-table__fixed {
     height: 100% !important;
   }

方法二

将fixed列高度设置为100%,并且将el-table__body-wrapper层级提高(这个方法是最简单直接的方法)

js 复制代码
  .el-table__body-wrapper { // 提高层级
    z-index: 2;
  }
  .el-table__fixed-right,.el-table__fixed { // fixed列高度100%
    height: 100% !important;
  }
相关推荐
Sheldon一蓑烟雨任平生6 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
孤狼warrior7 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉7 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5207 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck7 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
华仔啊8 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
Sheldon一蓑烟雨任平生8 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
CsharpDev-奶豆哥9 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
yume_sibai12 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书12 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript