antdesingnVue table 自适应高度 代码展示

你可以使用 v-if 和 v-else 来实现 AntDesign 的 Table 组件的自适应高度功能，下面是一个示例代码：
<template>
<a-table
v-if="tableHeight > 0"
:style="{height: tableHeight + 'px'}"
:columns="columns"
:dataSource="dataSource"
/>
<a-table
v-else
:columns="columns"
:dataSource="dataSource"
/>
</template><script>
export default {
data() {
return {
tableHeight: 0,
columns: [],
dataSource: [],
};
},
created() {
this.tableHeight = document.body.clientHeight - 200;
},
};
</script>

相关问题

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自适应高度的方法。

html table 自适应高度

要让 HTML 表格自适应高度，可以使用 CSS 中的 `height` 属性来实现。具体步骤如下：

1. 设置表格容器的高度为 `100%` 或者使用绝对定位来使其充满父容器。

.table-container {
  position: absolute; /* 如果使用绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 或者使用绝对定位 */
}

2. 设置表格的高度为 `100%`。

table {
  height: 100%;
}

3. 针对表格中的行元素设置高度为百分比。

tr {
  height: 10%; /* 例如这里设置每一行的高度为 10% */
}

这样，在父容器大小变化时，表格和表格中的行元素都会自适应高度，达到预期效果。