Define the js file that gets the height of the browser window

Height: calc(100vH-260px); The effect of

Note: the 260 is for top and bottom navigation as well as partial custom layout;

autoTableHeight.js

// Get the height of the browser window, dealing with the height of Element's Table component (height can only be a number or string)
function autoTableHeight() {
    var winHeight = 0;
    if (window.innerHeight) {
        winHeight = window.innerHeight;
    } else if (document.body && document.body.clientHeight) {
        winHeight = document.body.clientHeight;
    } // Get the height of the browser window by checking the body inside the Document
    if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
    }
    // 260 is for top and bottom navigation and partial custom layout; Height: calc(100vH-260px); The effect of
    return winHeight - 260;
}

// When the browser window changes
window.onresize = function() {
    autoTableHeight();
};

// When the browser reloads
window.onload = function() {
    autoTableHeight();
};

export default autoTableHeight;
Copy the code

Add js files to the component and bind height to the el-table

  1. Inside the component, el-table binds height, :height=”tableHeight”
  2. When the height property is set, the table head can be fixed, and the scroll bar will appear when the height is exceeded.
  3. Notice that I left out the header and top and the sidebar code.
<template> <div class="inform-manage comn_bg"> <el-table :data="tableData" class="multiple-table" border :highlight-current-row="true" :height="tableHeight" :default-sort="{ prop: 'name', order: 'descending' }" @sort-change="handleSortChange" @selection-change="handleSelectionChange" ref="multipleTable" tooltip-effect="dark" style="width: 100%;" > <el-table-column fixed="left" type="selection" width="55" align="center" ></el-table-column> <el-table-column sortable Width ="120" align="center" ></el-table-column> <el-table-column sortable prop="address" Align ="center" show-overflow-tooltip ></el-table-column> <el-table-column sortable prop="remark" Align ="center" width="120" ></el-table-column> <el-table-column sortable prop="date" label=" date" Align ="center" width="120" ></el-table-column> <el-table-column sortable prop="address" label=" Width ="120" ></el-table-column> <el-table-column sortable prop="remark" label=" remark" align="center" width="120" ></el-table-column> <el-table-column sortable label=" sort "width="120" align="center"> <template slot-scope="scope" align="center"> <el-input class="sort_input" v-model="scope.row.sortNum" ></el-input> </template> </el-table-column> < el - table - column sortable label = "status" align = "center" > < template slot - scope = "scope" > < span > {{scope. Row. The status | </span> </template> </el-table-column> <el-table-column sortable label=" operation "align="center" width="200"> <template slot-scope="scope"> <button class="download_btn"> < I class="el-icon-download"></ I > download </button> <button Class =" detail_bTN ">< I class="el-icon-tickets"></ I > Release details </button> </template> </el-table-column> </el-table> </div> </div> </div> </template> <script> import autoTableHeight from "@/utils/autoTableHeight.js"; Export default {data() {return {tableData: [{date: "2016-05-03", name: "2016-05-03", address: "No.1518 Jinshajiang Road, Putuo District, Shanghai ", remark:" Remark info 1", sortNum: 1, status: true}, {date: "2016-05-02", name: "Zhang Xiao ", address: "1518 Lane, Jinshajiang Road, Putuo District, Shanghai ", remark:" Remark info 2", sortNum: 2, status: false}, {date: "2016-05-04", name: "a ", address: "No.1518 Jinshajiang Road, Putuo District, Shanghai ", remark:" Remark info 3", sortNum: 3, status: true}], multipleSelection: []}; }, computed: { tableHeight() { return autoTableHeight(); }}, methods: {handleSelectionChange(val) {this.multipleselection = val; Console. log(" notify table data:", val); }, handleSortChange({column, prop, order}) {console.log(" Notification page sort change: ", prop); } }, filters: { filterStatus(status) { return status ? "Released" : "to be released "; }}}; </script> <style lang="scss"> .inform-manage { .download_btn { background: $icon_color; border: 1px solid $icon_color; color: #fff; padding: 2px; cursor: pointer; } .detail_btn { background: #ffb800; border: 1px solid #ffb800; margin-left: 20px; color: #fff; padding: 2px; cursor: pointer; } } </style>Copy the code