Method one is in the form of CSS + JS

Height =”tableH”; height=”tableH”; height=”tableH”

<div class="table-wrapper" ref="tableWrapper" v-loading="loading"> <el-table :data="tableData" stripe style="width: 100%" :height="tableH"> <el-table-column prop="date" label=" date" width="180"> </el-table-column> <el-table-column Width ="180"> </el-table-column> <el-table-column prop="address" label=" address" > </el-table-column> </el-table> </div>Copy the code

The height of the outermost div is set

<style lang=" SCSS "scoped>. Table-wrapper {height: calc(100%-60px); } </style>Copy the code

Dynamically obtain table height tableH method

<script> // Initialize tableH data() {return {tableH: 0}}, methods: ResetHeight () {return new Promise(resolve, reject) => {this.tableh = 0 resolve()})}, // Set table height fetTableHeight() {this.resetheight ().then(res => {this.tableh = This $refs. TableWrapper. GetBoundingClientRect (). The height - 10}}}), / / calls mounted () {enclosing fetTableHeight (); } </script>Copy the code
Method two pure CSS form

Add a div layer to the table and set the div height to “100%”

Method three instruction form

This method does not need to set the outer div, define a folder tableHeight and define a tableheight.js and index.js tableheight.js as follows

import { addResizeListener, RemoveResizeListener} from 'elemental-ui/SRC /utils/resize-event' Vnode) => {// get the Dom object const {componentInstance: $table} = await vnode const {value} = binding // if (! $table.height) { // throw new Error(`el-$table must set the height. Such as height='100px'`) // } // console.log($table, '$$$$table table table table') / / to get away from the bottom of the distance (used to display the page number and other information) const bottomOffset = (value && value. BottomOffset) | | 30 if (! $table) return const height = window.innerheight -el.getBoundingClientRect ().top-bottomOffset // $table.layout.setMaxHeight(height) $table.layout.setHeight(height) // $table.maxHeight = height $table.doLayout() } Export default {// initialize bind(el, binding, Vnode) {el.resizelistener = async () => {await doResize(el, binding, Vnode)} // bind listener to addResizeListener addResizeListener(window.document.body, el.resizelistener)}, // // binding default height async inserted(el, binding, vnode) {await doResize(el, binding, vnode)}, // // unbind(el) {// removeResizeListener removeResizeListener(el, el.resizelistener)}}Copy the code

Index. Js as follows

Import tableHeight from './table-height' const install = function(Vue) {// Bind Vue. Directive ('tableHeight', tableHeight) } if (window.Vue) { window['tableHeight'] = tableHeight // eslint-disable-next-line no-undef Vue.use(install) } tableHeight.install = install export default tableHeightCopy the code

The usage mode is introduced in main.js for global use, but you can also import main.js locally

/ / this is what you just write the index. The path of the js import tableHeight from '@ sysmng/directive/tableHeight' adaptive instruction / / form Vue. Use (tableHeight)Copy the code

Use in a table

// We need to set a default height, whatever it is, and then 60 is the height of everything else except the table. <el-table :data="tableData" stripe style="width: 100%" height="100px" v-tableHeight="{bottomOffset: 60}"> <el-table-column prop="date" label=" date" width="180"> </el-table-column> <el-table-column prop="name" label=" name" Width ="180"> </el-table-column> <el-table-column prop="address" label=" address" > </el-table-column> </el-table>Copy the code