1. 确认el-table的表头固定需求 你需要确认是否希望表头在滚动表格内容时保持固定。如果是的话,那么你可以继续下一步。 2. 查找el-table组件的固定表头属性或方法 在Element UI的文档中,el-table 组件有一个 height 属性,当设置了该属性后,表格会有一个固定的高度,并且可以通过 header-fixed 属性来固定表头。
说明,elementplus下table多级表头固定列是存在版本问题的,我下载1.3.0-beta.1版本安装到项目中亲测有效,所以根据实际情况考虑是不是要切换版本,希望能帮助到大家~
el-table表头固定不滑动 1.表格总体需要实现滚动效果,但是表头不会随之滚动 2.实现方式 表格外层盒子高度100%;el-table的高度也为100%,el-table标签中添加 height="100%" <divclass="tableD"> <el-table :data="Data" style="width: 100%" height="100%"> ... </el-table> </div>...
然后我们使用Element.getBoundingClientRect()这个接口来获取自适应区域的高度,设置为表格高度,这样即可达到自适应高度固定表头的效果 exportdefault{data(){return{tableHeight:0,tableData:[// xxx 表格数据]}},mounted(){this.calHeight()},methods:{calHeight(){this.$nextTick(()=>{constrect=this.$refs.co...
el-table设置了高度,但是表头不固定,会随着滑动条滑动另:border设置边框也不起作用,只能通过设置border样式才得以实现。之前这两个都可以的,不知道这次咋回事,都失效了。这个有人碰到过嘛?还需要设置什么吗? element-uivue.js 有用关注1收藏 回复 阅读4k 1...
vue el-table 自适应表格内容宽度 2019-12-13 11:51 −由于表头和列是分开渲染的,通过el-table 设置fit属性,只能撑开表头,但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章,记个笔记。 代码逻辑是通过vue 的watch 监控表格的数据data,计算每列的内容和表头的最大宽度,计算...
Bug Type: Component Environment Vue Version: 3.4.37 Element Plus Version: 2.8.0 Browser / OS: google/win Build Tool: CDN Reproduction Related Component el-table Reproduction Link Element Plus Playground Steps to reproduce 点击toggle按钮 Date...
.table-container-inner { position: absolute; left: 0; right: 0; top: 0 } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 然后我们使用Element.getBoundingClientRect()这个接口来获取自适应区域的高度,设置为表格高度,这样即可达到自适应高度固定表头的效果 ...
el-table表头数据出现“乱跳”现象,例如:序号本应该在第一列,它可能在tab切换之后蹦到了第五列。 问题分析: 这个问题通常是由于在使用 Element UI 的 el-table 组件时,列(el-table-column)的顺序与你预期数据顺序的不一致导致的。 解决方案: 给每一个 el-table-column 加一个key属性,按预期的顺序由小到大排...