本文使用的方案是,使用CSS和JS结合的方式,首先使用CSS规划出一个自适应高度的容器container,组件放到container的内部使用absolute绝对定位脱离文档流(如此table的高度不会影响到页面布局),然后使用JS获取container的高度tableHeight,将该值设置为el-table的height属...
然后我们使用Element.getBoundingClientRect()这个接口来获取自适应区域的高度,设置为表格高度,这样即可达到自适应高度固定表头的效果 export default { data () { return { tableHeight: 0, tableData: [ // xxx 表格数据 ] } }, mounted () { this.calHeight() }, methods: { calHeight () { this.$n...
计算属性 computed:{tableHeight(){// 在这里使用 calc 函数计算表格高度return`calc(${this.windowHeight}px -${this.tableTop}px - 50px)`;},}, 我这里底部总是多一节,所以减去了个 50px ,也留个底部间距 data tableTop:0,// 表格距离顶部的初始值windowHeight:window.innerHeight||document.documentElement....
在表格外部包一层div,设置div高度,el-table高度设置100%,动态计算div的高度 <div :style="{height:tableHeight}"> <el-table height="100%"></<el-table> </div> 1.创建 tableMixin.js export default { computed: { tableHeight() { // 底部50 头部60 分页40 搜索栏50 // 获取滚动条高度(宽度)...
height: 40px; }//表头 .el-table__body tr, .el-table__body td { padding: 0; height: 40px; }///各行 ///注意要把style的scoped去掉,不然不生效 方法2:(高度不生效) <el-table :data="unitList" :header-cell-style="{ <!-- 设置表头的背景色,字体颜色,行高 --> ...
诶,这样就使配的不同大小屏幕里table高度的问题,但是随即遇到了下述问题。 问题2: 设置max-height之后 table无法滚动 解决办法: .el-table{display:flex;flex-direction:column;} 此时可以进行滚动了,但是表头部分ui错乱了。查看页面元素,发现是被溢出隐藏了 ...
主要这4个属性 关系到表格行和表格头的行高 将row相关属性 中的height设置为0 将cell相关属性 中padding设置为0 将td中的padding默认padding:8px 0 去掉 然后利用深度作用选择器 选中行标签 设置自己想要的高度 table上设置 :row-style="{height: '0'}" ...
Elementui表格高度主要由三部分组成:列头(el-table-column)、行(el-table-row)和表头(el-table)。默认情况下,表格高度是固定的,但可以通过设置`height`属性来改变表格的高度。 2. 自定义表格高度 为了实现自适应高度,我们需要自定义表格的高度。可以通过设置`style`属性来实现。例如,我们可以设置一个全局的表格样...
<!-- 使用 useVirtual 属性开启虚拟滚动 使用虚拟滚动时,必须要固定表格高度和行高 --> <div style="height: 100%;width: 100%;padding: 0 30px"> <div style="color:red;">pl-table在线预览,更多玩法请看文档哦,欢迎Star</div> <el-button @click="$router.push({ path: '/text' })" ...