通过设置 <el-table> 组件的 height 属性,可以固定表头,并在内容超出高度时显示滚动条。 html <el-table :data="tableData" height="400"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名"...
然后将版本切换到低版本1.3.0-beta.1,发现是可以的 最后我切换到最新版本,发现全部给我固定了,也就是说一级表头给fixed,二级默认全部固定,这并不是我想要的 说明,elementplus下table多级表头固定列是存在版本问题的,我下载1.3.0-beta.1版本安装到项目中亲测有效,所以根据实际情况考虑是不是要切换版本,希望能帮助...
el.style.overflow="visible";consttHeader=el.querySelector(".el-table__header-wrapper");tHeader.style.position="sticky";tHeader.style.top=top;tHeader.style.zIndex=10; 到这里基本上已经实现表头吸顶的功能了,但是如果出现固定列的话就不行。那么继续完善。 研究表格元素结构发现,没有固定列的头部在el...
第一:需要在页面的el-table配置属性:ref="table" 和 :height="tableHeight"。 举例: <el-table ref="table" :height="tableHeight" v-loading="tableLoading" element-loading-text="拼命加载中" :data="tableData"> 第二:需要添加样式(偶发:有表格没有出现y轴滚动条的情况) .el-table__body-wrapper {...
const tHeader = document.querySelector('.el-table__header-wrapper') const ths = tHeader.querySelectorAll('th.is-hidden') ths.forEach(item => { item.classList.remove('is-hidden') }) const table = this.$refs.table // 找到左边固定列的信息 ...
1. 固定表头 el-table固定表头非常简单,只要给添加height属性即可。 <el-table height="250"></el-table> 2. 占满高度 如果想让表格占满当前高度,必要前提是让父元素的高度先撑满当前高度。 <div style="height:100%"> <el-table height="100%"></el-table> ...
本文使用的方案是,使用CSS和JS结合的方式,首先使用CSS规划出一个自适应高度的容器container,组件放到container的内部使用absolute绝对定位脱离文档流(如此table的高度不会影响到页面布局),然后使用JS获取container的高度tableHeight,将该值设置为el-table的height属...
那如何设置el-table固定表头呢？方法/步骤 1 打开一个vue文件，在该vue文件上添加一个el-table组件，并设置表格显示数据内容为日期、姓名、地址。如图 2 在el-table组件上设置高为150，用于固定表头。如图 3 保存vue文件后即可看到表格右边有个滚动条，滚动该滚动条发现表格头部已经实现固定效果。如图 ...
一.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...
在这个示例中,el-table组件通过设置height属性来固定表头。:height="300px"表示表格的高度为300像素,这样即使表格内容超出了这个高度,表头也会固定在顶部。 请注意,这个示例假设你已经在你的Vue项目中安装并配置了element-ui。如果你还没有安装element-ui,你可以通过npm或yarn来安装它: ...