vue+el-table 根据屏幕大小动态设置height属性以固定表头

el-table需要固定表头时只要在标签里加上height属性就可以了,但是怎样根据屏幕大小自动调整height属性呢?

解决办法:vue加载时计算下需要给table设置的height

<el-table ref="table" :data="info" :span-method="colspanMethod" :height="tableHeight">
    <el-table-column type="selection" width="40">
    </el-table-column>
    <el-table-column label="序号" width="60">
        <template slot-scope="scope">
            {{scope.$index+1}}
        </template>
    </el-table-column>
    <el-table-column label="单位" width="260">
        <template slot-scope="scope">
            {{scope.row.ORGNAME}}
        </template>
    </el-table-column>
    <el-table-column label="文件名称" width="260">
        <template slot-scope="scope">
            {{scope.row.jyFile.FILE_NAME}}
        </template>
    </el-table-column>
</el-table>
mounted:function(){
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
    //window.innerHeight:浏览器的可用高度
    //this.$refs.table.$el.offsetTop:表格距离浏览器的高度
    //后面的50:根据需求空出的高度,自行调整
}

 

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
以下是VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法: ```html <template> <div class="table-container"> <el-table :data="tableData" style="width: 100%" :row-style="{height: '50px'}" :header-row-style="{height: '50px'}" :fit="false" :height="tableHeight" ref="table" > <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址" width="180"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2021-01-01', name: '张三', address: '北京市朝阳区' }, { date: '2021-01-02', name: '李四', address: '上海市浦东新区' }, { date: '2021-01-03', name: '王五', address: '广州市天河区' } ], tableHeight: 0 } }, mounted() { this.getTableHeight() window.addEventListener('resize', this.getTableHeight) }, beforeDestroy() { window.removeEventListener('resize', this.getTableHeight) }, methods: { getTableHeight() { const tableHeight = document.documentElement.clientHeight - this.$refs.table.$el.offsetTop - 50 this.tableHeight = tableHeight } } } </script> <style> .table-container { height: 100%; overflow: auto; } </style> ``` 在这个例子中,我们使用了ElementUI的el-table组件,并且设置了表格的高度tableHeight。在mounted钩子函数中,我们调用了getTableHeight方法来获取表格的高度。在getTableHeight方法中,我们使用了document.documentElement.clientHeight来获取浏览器窗口的高度,然后减去表格距离浏览器窗口顶部的距离和表头高度,得到表格的高度。最后,我们将计算出来的表格高度赋值给tableHeight即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值