el-table动态高度

el-table的动态高度可以通过以下几种方法实现：

1. 使用CSS和JavaScript的方法：在el-table外层设置一个div，并使用calc函数来设置该div的高度。然后，给el-table设置:height="tableH"属性，其中tableH是一个动态获取的表格高度变量。通过计算该div的高度，可以实现el-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="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</div>

2. 使用Vue指令的方法：在index.js中引入table-height指令，并将其绑定到Vue实例上。然后，在el-table上使用v-tableHeight指令，将表格的高度设置为动态获取的值。示例代码如下：

import tableHeight from './table-height'

const install = function(Vue) {
  Vue.directive('tableHeight', tableHeight)
}

if (window.Vue) {
  window['tableHeight'] = tableHeight
  Vue.use(install)
}

tableHeight.install = install

export default tableHeight

3. 使用max-height属性：给el-table设置:max-height属性，并将其值设置为一个动态获取的变量。示例代码如下：

<el-table :data="tableData" border fit :max-height="maxHeight">

以上就是el-table实现动态高度的几种方法。具体选择哪种方法取决于你的项目需求和场景。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>