vue3封装Element表格自适应

表格高度自适应
分页跟随表格之后

1. 满屏时出现滚动条

2. 不满屏时不显示滚动条

坑

表格设置maxHeight后不出现滚动条

解决方案

表格外层元素设置max-height
el-table–fit 设置高度100%

.table-box {
  max-height: calc(100% - 120px);
}
.el-table--fit {
  height: 100%;
}

示例代码

<template>
  <div class="outer-box">
    <div class="form-box">
      <DymanicForm
        ref="formRef"
        :inline="true"
        :schema="schema"
        v-model="searchValue"
      >
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </DymanicForm>
    </div>
    <div class="table-box">
      <Table
        :tableData="tableData"
        :haveCheckBox="true"
        :haveIndex="true"
        :columns="tableColumn"
        :stripe="true"
        :border="true"
        max-height="100%"
        @select-change="handleSelectChange"
        @row-click="handleRowClick"
      />
    </div>
    <div class="page-box">
      <Pagination
        :total="total"
        v-model:currentPage="queryParams.currentPage"
        v-model:currentSize="queryParams.currentSize"
        @pagination="handleGetTableData"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { ItemSchema } from "~/types/dymanic";
import DymanicForm from "~/components/DymanicForm.vue";
import { ElMessage } from "element-plus";

const formRef = ref<InstanceType<typeof DymanicForm>>();
const schema = ref<ItemSchema>({
  userId: {
    formItem: {
      label: "用户ID：",
    },
    style: {
      width: "200px",
    },
    componentName: "ElInput",
    placeholder: "请输入用户ID",
    maxlength: 20,
  },
  username: {
    formItem: {
      label: "账号：",
    },
    style: {
      width: "200px",
    },
    componentName: "ElInput",
    placeholder: "请输入账号",
    maxlength: 20,
  },
  name: {
    formItem: { label: "用户名：" },
    style: {
      width: "200px",
    },
    componentName: "ElInput",
    placeholder: "请输入用户名",
    maxlength: 20,
  },
  date: {
    formItem: {
      label: "日期：",
    },
    style: {
      width: "200px",
    },
    componentName: "ElDatePicker",
    type: "daterange",
    startPlaceholder: "开始日期",
    endPlaceholder: "结束日期",
  },
});
const searchValue = reactive({
  userId: "",
  username: "",
  name: "",
});
const handleQuery = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      console.log("查询", searchValue);
      // 查询逻辑
    }
  });
};

const handleReset = () => {
  formRef.value.resetFields();
};

const tableData = ref([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    userid: "123456789",
    username: "admin",
    password: "123456",
    role: "管理员",
    status: "正常",
    createTime: "2023-03-01 12:00:00",
    updateTime: "2023-03-01 12:00:00",
    remark: "备注",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    userid: "123456789",
    username: "admin",
    password: "123456",
    role: "管理员",
    status: "正常",
    createTime: "2023-03-01 12:00:00",
    updateTime: "2023-03-01 12:00:00",
    remark: "备注",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    userid: "123456789",
    username: "admin",
    password: "123456",
    role: "管理员",
    status: "正常",
    createTime: "2023-03-01 12:00:00",
    updateTime: "2023-03-01 12:00:00",
    remark: "备注",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    userid: "123456789",
    username: "admin",
    password: "123456",
    role: "管理员",
    status: "正常",
    createTime: "2023-03-01 12:00:00",
    updateTime: "2023-03-01 12:00:00",
    remark: "备注",
  },
]);

const tableColumn = reactive([
  {
    prop: "date",
    label: "日期",
    width: "180",
    align: "center",
  },
  {
    prop: "name",
    label: "姓名",
    width: "180",
    align: "center",
  },
  {
    prop: "address",
    label: "地址",
    width: "280",
    align: "left",
  },
  {
    prop: "userid",
    label: "用户ID",
    width: "180",
    align: "center",
  },
  {
    prop: "username",
    label: "用户名",
    width: "180",
    align: "center",
  },
  {
    prop: "password",
    label: "密码",
    width: "180",
    align: "center",
  },
  {
    prop: "role",
    label: "角色",
    width: "180",
    align: "center",
  },
  {
    prop: "status",
    label: "状态",
    width: "180",
    align: "center",
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: "180",
    align: "center",
  },
  {
    prop: "updateTime",
    label: "更新时间",
    width: "180",
    align: "center",
  },
  {
    prop: "remark",
    label: "备注",
    width: "180",
    align: "center",
  },
  {
    prop: "operation",
    label: "操作",
    width: "280",
    align: "center",
    fixed: "right",
    operate: [
      {
        label: "编辑",
        icon: "Edit",
        type: "primary",
        click: (row: any) => {
          ElMessage.success("点击了编辑" + row.name);
        },
      },
      {
        label: "删除",
        icon: "Delete",
        type: "danger",
        click: (row: any) => {
          ElMessage.error("点击了删除" + row.name);
        },
      },
    ],
  },
]);

const handleSelectChange = (selection: any) => {
  ElMessage.success("选择了" + selection[0].name);
  console.log(selection);
};

const handleRowClick = (row, column, event) => {
  ElMessage.success("点击了" + row.name);
  console.log(row);
  console.log(column);
  console.log(event);
};

const total = ref(100);
const queryParams = ref({
  currentPage: 2,
  currentSize: 30,
});
const handleGetTableData = () => {
  ElMessage.success(
    `当前页：${queryParams.value.currentPage}，每页条数：${queryParams.value.currentSize}`
  );
  console.log(queryParams.value);
};
</script>
<style lang="scss" scoped>
.outer-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.form-box {
  height: 60px;
  display: flex;
  align-items: center;
}
.table-box {
  max-height: calc(100% - 120px);
}
.el-table--fit {
  height: 100%;
}
.page-box {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}
</style>