表头固定意味着当表格内容滚动时,表头将保持在视图的顶部,不随内容滚动而移动。 2. 查找Element UI官方文档中关于el-table表头固定的方法 在Element UI的官方文档中,el-table 组件有一个 height 属性,当设置了这个属性后,可以通过 header-fixed 属性来固定表头。
<el-table :data="tableData" style="width: 100%" :height="tableHeight"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> </el-table> created() { // 100是表格外其它布局占的高度,这个数值根据自己实际情况修改 this.tableHeight = window.innerHeight - 100 } ...
看了element ui 官方给出的是直接给el-table一个固定高度就可以实现,我就尝试了一下 <el-tableheight="250"></el-table> 确实能够达到表头固定的方法,但是table高度就固定了,想着实现根据网页高度来设置 <el-table :height="tableHeight"></el-table> <script> // 获取网站高度 const windowHeight = parseInt...
然后我们使用Element.getBoundingClientRect()这个接口来获取自适应区域的高度,设置为表格高度,这样即可达到自适应高度固定表头的效果 exportdefault{data(){return{tableHeight:0,tableData:[// xxx 表格数据]}},mounted(){this.calHeight()},methods:{calHeight(){this.$nextTick(()=>{constrect=this.$refs.co...
一.el-table表头固定,表格内容滚动 <style lang="less" scoped> /deep/.el-table__header-wrapper { position: sticky; width: 100%; top:0px;z-index: 2000; } </style> <el-tab-pane label="登录日志" name="1"> <el-table v-loading="listLoading" :data="loginLogData" style="height:480px...
在使用Element开发vue项目时，el-table默认没有实现表头固定效果，那如何设置el-table固定表头呢？方法/步骤 1 打开一个vue文件，在该vue文件上添加一个el-table组件，并设置表格显示数据内容为日期、姓名、地址。如图 2 在el-table组件上设置高为150，用于固定表头。如图 3 保存vue文件后即可看到表格右边有个滚动条...
// 随便定义一个初始高度防止报错 height: “200px” }; } } 复制代码 如上设置height设置好了table表头固定 高度如何设置 上面设置好了表头固定, 继续我们要动态设置height为父节点的height 并且给el-table设置 id 这里需要注意的是 我们在设置为父节点的height的过程中假设父节点有padding值我们需要减掉 ...
.table-container { position: relative; } .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__header-wrapper,而有固定列的头部会被额外拆分到el-table__fixed、el-table__fixed-right, 其实可以直接修改el-table__header-wrapper里面的th样式即可。