vue+el-table 根据屏幕大小动态设置max-height属性适合适配多个表格高度出现滚动条

<el-table ref="table" :data="info" :span-method="colspanMethod" :max-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:根据需求空出的高度,自行调整
}

猜你喜欢

转载自blog.csdn.net/m13302979400/article/details/92796349