在Element UI中,实现表格固定表头功能可以通过多种方式完成。以下是几种常见的方法,每种方法都附有相应的代码示例: 1. 使用 max-height 属性 通过设置 <el-table> 组件的 max-height 属性,可以固定表头并在内容超出高度时显示滚动条。 html <el-table :data="tableData" max-height="400"> ...
在使用element-ui的el-table组件时,固定表头是一个常见的需求,特别是当表格内容较多时。以下是固定表头的一个基本示例代码: <template><el-table:data="tableData"style="width: 100%"height="300px"><el-table-columnprop="date"label="日期"width="150"></el-table-column><el-table-columnprop="name"l...
1.固定表头: 如果表格过长,需要做滚动效果,但是又不想让表格整体都滚动。那么我们可以做表格头部固定,内容进行滚动。 <el-tableheight="400"> </el-table> 这里的height给值即可,是不是很简单。解释:超过高度400,表格的表头固定不动,内容支持滚动。 2.固定某列: <el-tableheight="400"> <el-table-columnf...
然后我们使用Element.getBoundingClientRect()这个接口来获取自适应区域的高度,设置为表格高度,这样即可达到自适应高度固定表头的效果。 export default {data () {return {tableHeight: 0,tableData: [// xxx 表格数据]}},mounted () {this.calHeight(...
固定列和表头可以同时使用,只需要将上述两个属性分别设置好即可。 前端显示: 代码实现 <template> <el-table :data="tableData3" style="width: 100%" height="250"> <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column> ...
到这里基本上已经实现表头吸顶的功能了,但是如果出现固定列的话就不行。那么继续完善。 研究表格元素结构发现,没有固定列的头部在el-table__header-wrapper,而有固定列的头部会被额外拆分到el-table__fixed、el-table__fixed-right, 其实可以直接修改el-table__header-wrapper里面的th样式即可。
let t1 = document.querySelector('.stickyTable').getBoundingClientRect().top;//表格盒子离视图顶部的距离 let t2 = document.querySelector('.el_main').getBoundingClientRect().top;//所在滚动区域也是表头要定位的区域离视图顶部距离 let t = t2-t1 ...
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.因为表头固定会在多个地方用到,所以弄成了组件。先创建一个表头的组件pk-table-header <template> <div id="fix-table-header" class="table-wrapper" :style="{top: `${navHeightV2}px`}"> // 这里的top是因为我们后台顶部会有一些固定提示
以element-ui官方文档一个table表格为例,我们在地址的后面加一个定位标志的图标,代码如下: <template> <el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName"> <el-table-column prop="date" label="日期" width="180"> ...