一、前言说明
网上一搜索,千篇一律的设置el-table__fixed,如:
.el-table__fixed { // 左固定列 height: auto !important; bottom: 18px; } .el-table__fixed-right { // 右固定列 height: auto !important; bottom: 18px; }
此方法存在较多问题:
1.导致表格错位,还要去调整错位问题,也会导致更多浏览器兼容错位问题
2.bottom的固定高度只能满足单一浏览器分辨率,不同电脑不同浏览器,分辨率不同,会出现多一些少一些等情况。
二、有效方案
通过首次进入,加载数据完成后重新渲染一次表格即可解决问题,以下是解决方案的相关代码
<!-- 1.表格上增加ref属性 --> <el-table ref="tableRef" ……> …… </el-table> <script> export default { data() { return { // 2. 定义变量,是否需要表格重新渲染 needDoLayout: true, } } created() { this.queryData(); }, methods: { queryData() { // 查询数据代码 省略 // 3.第一次查询数据时,将表格重新渲染即可 if(this.needDoLayout){ this.$nextTick(() => { this.$refs['tableRef'].doLayout(); }); this.needDoLayout = false; } } } </script>
标签:__,el,表格,bottom,滚动条,table,fixed,骨灰级 From: https://www.cnblogs.com/Vrapile/p/17076779.html