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:根據需求空出的高度,自行調整
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章