动态调整高度，让表格不挤占页面空间——你需要的Vue Table工具

前端

2024-01-18 16:43:48

自由翱翔的表格，告别臃肿的页面

还在为表格高度烦恼吗？告别滚动条，拥抱自适应！

在Vue项目的开发中，表格是我们不可或缺的组件。然而，随着表格内容的增多，高度问题也随之而来。滚动条的出现，不仅影响了用户的体验，也让整个页面显得臃肿不堪。

TAdaptivePage组件闪亮登场，自适应高度不再是梦

如今，我们可以借助TAdaptivePage组件，轻松实现表格自适应高度。它就像一位魔法师，能够根据表格内容自动调整高度，让表格与页面和谐共存，再也不用为滚动条而烦恼了。

左右分栏布，让布局更灵活

TAdaptivePage组件不仅可以实现自适应高度，还支持左右分栏布局。你可以根据自己的需求，将表格放置在左边或右边，让布局更加灵活多变，满足不同场景下的使用需求。

亲身实践，感受神奇之处

为了让你更好地理解TAdaptivePage组件的强大之处，我们准备了一个简单的示例代码。在代码中，我们将表格放置在页面的左边，并设置了自适应高度。你可以轻松看到，表格内容是如何根据实际内容自动调整高度的，再也不用担心表格挤占页面空间了。

代码示例

<template>
  <div class="container">
    <TAdaptivePage>
      <div class="left-column">
        <el-table :data="tableData" style="height: 100%"></el-table>
      </div>
      <div class="right-column">
        其他内容
      </div>
    </TAdaptivePage>
  </div>
</template>

<script>
import TAdaptivePage from 'TAdaptivePage';
import { ref } from 'vue';

export default {
  components: { TAdaptivePage },
  setup() {
    const tableData = ref([
      { name: 'John', age: 20 },
      { name: 'Mary', age: 25 },
      { name: 'Bob', age: 30 }
    ]);

    return {
      tableData
    };
  }
};
</script>

<style>
.container {
  display: flex;
  height: 100vh;
}

.left-column {
  width: 50%;
  border-right: 1px solid #ccc;
}

.right-column {
  width: 50%;
}

.el-table {
  height: 100%;
}
</style>