1.创建 tableMixin.js export default { computed: { tableHeight() { // 底部50 头部60 分页40 搜索栏50 // 获取滚动条高度(宽度) let scrollBarHeight = this.getScrollbarWidth() // 当屏幕宽度小于1600时候减去滚动条的高度 if (document.body.clientWidth < 1600) { return `calc(100vh - 200px ...
el-table设置高度自适应页面 当遇到不同浏览器不同屏幕尺寸时,想让el-table有个自适应的高度。 首先在el-table中动态绑定一个高度:height="tableHeight",并在data中声明tableHeight。 <el-tableref="multipleTable":data="tablist"style="width: 100%"v-if="tableHeight":height="tableHeight"></el-table> ...
//计算el-table父容器的高度 let offsetHeight = that.$refs.tabWrap.offsetHeight; //默认展示10行,如果表格行小于10个,那么表格高度等于行高*行数 + 表头高 + 2根边框border高度 if (offsetHeight > 50 * 10 + 50) { that.tableHeight = that.tableData.length > 0 ? that.tableData.length * 50 ...
下面是一个简单的例子,红色框是父容器,蓝色框是自适应高度的内容区域,该元素没有设置height属性,其高度自动适应为父元素高度减去“头部”的高度、padding、头部和“内容”之间的margin等。 <div class="container"> <div class="header">不确定高度的头部</div> <div class...
$table)return// 计算列表高度并设置letheight=window.innerHeight-el.getBoundingClientRect().top-bottomOffsetif(height<400){//适应小屏幕height=600;//设置最小高度}if(height>1170){//适应大屏幕height=1170;//设置最大高度}$table.layout.setHeight(height)$table.doLayout()}exportdefault{// 初始化设置...
如上设置height设置好了table表头固定 高度如何设置 上面设置好了表头固定, 继续我们要动态设置height为父节点的height 并且给el-table设置 id 这里需要注意的是 我们在设置为父节点的height的过程中假设父节点有padding值我们需要减掉 export default { methods: { ...
* (以下数值为滚动条高度,可以自己根据情况通过class重新修改)*///内容大于容器时if(tableBody.clientWidth >tableWrapper.offsetWidth) {//设置x轴滚动tableWrapper.style.overflowX = 'auto'//解决固定列错位 (没有错位的可以忽略以下内容)let fixedWrap = table.querySelectorAll('.el-table .el-table__fixed...
增加el-table 自适应高度指令 162bbbc ContributorAuthor http://jsrun.net/a3XKp/edit 已修复 重复添加resize事件 @yuntao1997有几个bug,1、在element-admin里面,多个table用了这个指令,就注册了多个resize事件 2、在一个有边框的table上,当有一列的宽度没有设置的时候,拉伸这一列,整个页面页面就会卡死,死循环...
本文使用的方案是,使用CSS和JS结合的方式,首先使用CSS规划出一个自适应高度的容器container,组件放到container的内部使用absolute绝对定位脱离文档流(如此table的高度不会影响到页面布局),然后使用JS获取container的高度tableHeight,将该值设置为el-table的height属性,从而实现表格自适应高度固定表头。
element-plus 设置el-table表格自适应高度 目前使用的最佳方案: 将表格用一个外部容器包裹起来, 通过css来设置外部容器的高度 el-table表格使用height属性设置为100%高度 经测试可以实现效果的代码: <div class="table_container" v-if="!isEmpty"> <!-- 高度: 100vh - header padding40px - header40px - ...