SoFunction
Updated on 2025-04-11

3 ways to dynamically set table height based on ElementUI for vue

Method 1, form of css + js

This method requires setting a div on the outer layer of the table. The principle is to set the height of the table to the height of the outer layer div, so the outer layer div needs to use calc to set the height, and then set the attribute of:height="tableH" for the table.

<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
      prop="name"
      label="Name"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="address">
    </el-table-column>
 </el-table>
</div>

How to set the outer div height

//What is subtracted here is the height of your personal business except for the table, such as query conditions, etc.<style lang="scss" scoped>
.table-wrapper {
    height: calc(100% - 60px);
 }
</style>

Method for obtaining table height tableH in state

<script>
// Initialize tableH in datadata() {
      return {
         tableH: 0
      }
},
methods: {
  // Reset the table height      resetHeight() {
        return new Promise((resolve, reject) => {
           = 0
          resolve()
        })
      },
      // Set the table height      fetTableHeight() {
        ().then(res => {
           = this.$().height - 10
        })
      }
},
// Call mounted() {
    ();
 }
</script>

Method 2: Pure CSS form

You still need to add a layer of div to the table. The div height setting is the same as method one. However, the table height does not need to be dynamically set, just set height="100%"

Method 3, form of instructions

This method does not require setting an outer div, define a folder tableHeight and define a
as follows

import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'

// Set the table heightconst doResize = async (el, binding, vnode) => {
  // Get the table Dom object  const { componentInstance: $table } = await vnode
  // Get the data passed by the call  const { value } = binding
  // if (!$) {
  //   throw new Error(`el-$table must set the height. Such as height='100px'`)
  // }
  // ($table, '$table$table$table$table')
  // Get the distance from the bottom (used to display page numbers and other information)  const bottomOffset = (value && ) || 30
  if (!$table) return
  // Calculate the list height and set it  const height =  - ().top - bottomOffset
  // $(height)
  $(height)
  // $ = height
  $()
}

export default {
  // Initialize settings  bind(el, binding, vnode) {
    // Set the resize listening method     = async () => {
      await doResize(el, binding, vnode)
    }
    // Bind the listening method to addResizeListener    addResizeListener(, )
  },
  // // Bind the default height  async inserted(el, binding, vnode) {
    await doResize(el, binding, vnode)
  },
  // // Set during destruction  unbind(el) {
    // Remove resize listening    removeResizeListener(el, )
  }
}

as follows

import tableHeight from './table-height'

const install = function(Vue) {
  // Bind v-adaptive directive  ('tableHeight', tableHeight)
}

if () {
  window['tableHeight'] = tableHeight
  // eslint-disable-next-line no-undef
  (install)
}

 = install

export default tableHeight

Use the method, introduce it in for global use, of course you can also introduce it locally

// This is the path you just wroteimport tableHeight from '@sysmng/directive/tableHeight'
// Table adaptive command(tableHeight)

Used in the table

// Here you need to set a default height, which can be as much as you want, and the next 60 is the height of other content except the table, such as query conditions, etc.// The advantage of the command is that it will monitor the changes in the screen to dynamically change the height.<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>

The above is the detailed content of the three methods of vue dynamically setting table height based on ElementUI. For more information about the three methods of vue dynamically setting table height based on ElementUI, please pay attention to my other related articles!