el-table 自适应高度

可以通过设置 el-table 的 max-height 和 height-mode 属性来实现自适应高度。其中，height-mode 属性设置为 'maxHeight' ，max-height 属性可以根据 el-table 容器的高度自适应调整 el-table 组件的高度。具体代码如下：

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

相关问题

el-table自适应高度

要实现el-table的自适应高度，可以按照以下步骤进行操作：
1. 在el-table中动态绑定一个高度，并在data中声明tableHeight。

<el-table ref="multipleTable" :data="tablist" style="width: 100%" v-if="tableHeight" :height="tableHeight"></el-table>

data() {
  return {
    tableHeight: "",//表格高度
  }
}

2. 声明一个方法来计算el-table的高度。

methods: {
  //计算table高度(动态设置table高度)
  getTableHeight() {
    let tableH = 210; //距离页面下方的高度
    let tableHeightDetil = window.innerHeight - tableH;
    if (tableHeightDetil <= 300) {
      this.tableHeight = 300;
    } else {
      this.tableHeight = window.innerHeight - tableH;
    }
  },
}

3. 在mounted钩子函数中，通过计算窗口高度、表格距离顶部距离和需求高度来设置tableHeight，并更新表格防止内容变化引起异常情况。同时，监听窗口大小变化，实时更新tableHeight。

mounted() {
  let that = this;
  this.$nextTick(() => {
    this.tableHeight = window.innerHeight - this.$refs.table_e.$el.offsetTop - 200; //窗口高度-表格距离顶部距离-需求高度
    this.$refs.table_e.doLayout(); //更新表格防止表格内容变化表格异常情况
    //监听窗口大小变化
    window.onresize = function() {
      that.tableHeight = window.innerHeight - that.$refs.table_e.$el.offsetTop - 200;
      that.$refs.table_e.doLayout();
    };
  });
},

以上就是实现el-table自适应高度的方法。

vue2.0 elementui2.0表格el-table自适应高度的实现方法

在Vue2.0和ElementUI2.0中使用el-table表格组件时，自适应高度可以通过以下步骤来实现：

1. 确定数据源

首先，我们需要确定用于填充表格的数据源。在el-table中，数据通常以数组的形式传递，其中每个数组元素代表表格中的一行数据。

2. 计算表格高度

在Vue中，我们可以使用计算属性来动态计算表格的高度。计算属性会根据数据源的变化自动更新表格高度。例如，我们可以使用下面的代码来计算表格高度：

computed: {
tableHeight: function() {
// 获取窗口可见区域高度
var viewportHeight = window.innerHeight;
// 计算表格头和分页组件的高度
var tableHeaderHeight = this.$refs.table.$el.querySelector('.el-table__header-wrapper').offsetHeight;
var paginationHeight = this.$refs.pagination.$el.offsetHeight;
// 计算表格内容区域的高度
var contentHeight = viewportHeight - tableHeaderHeight - paginationHeight - 20;
return contentHeight;
}
}

在上面的代码中，我们首先获取窗口可见区域的高度，然后根据表格头和分页组件的高度计算表格内容区域的高度。最后，将计算出的高度返回。

3. 绑定表格高度

我们将计算属性中计算出的表格高度绑定到el-table组件中的height属性上，以实现自适应高度。例如，我们可以使用下面的代码将表格高度绑定到el-table组件上：

<el-table :data="tableData" ref="table" :height="tableHeight">

在上面的代码中，我们首先使用data属性传递数据源，然后使用ref属性给el-table组件添加一个引用，最后使用height属性将计算属性中计算出的表格高度绑定到组件上。

通过上述方法，我们可以在Vue2.0和ElementUI2.0中实现自适应高度的el-table表格组件。