ElementPlus 表格自动流体高度

ElTable自动撑满页面剩余空间(高度)且自动适应流体高度；

借助flex、flex-1、overflow-hidden实现；

PixPin_2024-11-01_12-41-53

• template结构

<template>
  <!-- 弹性布局 flex -->
  <div class="p-4 h-screen flex flex-col">
    <div class="search-tools bg-white p-4 rounded-md">
      <!-- 搜索 -->
      <el-form inline :model="queryForm">
        <el-form-item label="名称">
          <el-input v-model="queryForm.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第一个 flex:1; 元素，必须设置 overflow: hidden; -->
    <div
      class="my-2 bg-white p-4 rounded-md flex-1 flex flex-col overflow-hidden"
    >
      <!-- 工具栏 -->
      <div class="table-tools">
        <el-button type="primary">新增</el-button>
        <el-button type="danger">删除</el-button>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" border stripe class="my-4 flex-1">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column label="名称" prop="name" />
        <el-table-column label="性别" prop="sex" />
        <el-table-column label="年龄" prop="age" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-tools flex justify-center items-center">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          v-model:page-size="pageSize"
          v-model:current-page="currentPage"
          @change="loadTableData"
        />
      </div>
    </div>
  </div>
</template>

• script setup逻辑（其实没啥用···）

import { ref } from "vue";

const queryForm = ref({
  name: "",
});

const tableData = ref([]);
const total = ref(100);
const currentPage = ref(1);
const pageSize = ref(10);

const loadTableData = () => {
  console.log(currentPage.value, pageSize.value);

  tableData.value = Array.from({ length: pageSize.value }, (v, k) => {
    return {
      id: k + 1,
      name: `name${k + 1}`,
      sex: ["男", "女"][Math.floor(Math.random() * 2)],
      age: Math.floor(Math.random() * 100),
    };
  });
};
loadTableData();