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

最新推荐文章于 2024-08-12 10:45:55 发布

朝南向北

最新推荐文章于 2024-08-12 10:45:55 发布

阅读量2.5w

点赞数 6

本文链接：https://blog.csdn.net/qq_42204033/article/details/82688709

版权

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：根据需求空出的高度，自行调整
}