vue 表格自适应高度

在Vue中实现表格自适应高度的方法有很多种。以下是一种常用的方法：

1. 绑定数据：首先，在Vue的data选项中定义一个数组，用于存储表格的数据。

2. 使用CSS样式：为表格的包裹容器设置一个固定高度，并设置overflow:auto属性，以实现滚动效果。

3. 利用计算属性和watch监听数据变化：创建一个计算属性，用于动态计算表格的高度。

data() {
  return {
    tableData: [], // 表格数据
  }
},
computed: {
  tableHeight() {
    return this.tableData.length > 8 ? '400px' : 'auto'; // 当表格数据超过8行时，设置固定高度，否则自适应高度
  }
},
watch: {
  tableData() {
    this.$nextTick(() => {
      this.refreshTableHeight(); // 监听数据变化后，重新计算表格高度
    });
  }
},
methods: {
  refreshTableHeight() {
    const tableContainer = document.getElementById('table-container'); // 表格包裹容器的id
    if (tableContainer) {
      tableContainer.style.height = this.tableHeight;
    }
  },
},

4. 在视图中使用表格组件和绑定样式：

<template>
  <div id="table-container" :style="{ height: tableHeight }">
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
</template>

通过以上方法，可以实现根据表格数据的行数自适应调整表格的高度，当数据超过一定行数时，表格高度固定，并出现垂直滚动条；当数据少于一定行数时，表格高度自适应。