element表格实现一屏自适应高度

原创已于 2024-05-11 14:40:43 修改 · 949 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

于 2023-06-06 14:17:55 首次发布

该文章介绍了如何利用Flex布局在后台管理系统中创建一个始终保持顶部搜索条件、中间自适应表格和底部分页的布局。通过设置最外层容器的高度和flex属性，以及内部元素的相对定位，确保在不同分辨率下各部分布局的稳定性。同时，对ElementUI的表格组件进行了优化，设置了默认高度为100%和内容溢出时显示tooltip。

需求场景：

提示：这里简述相关背景：

例如：项目场景：后台管理为了美观，要求不同分辨率始终保持顶部搜索条件，中间表格，底部分页布局，效果如下：

在这里插入图片描述

代码展示

提示：这里直接展示代码，其实比较简单：

原理：就是利用flex布局，最外层定义一个高度可以自己计算，三个板块中间表格板块设置flex:1（独占剩余所有空间），内部使用相对定位，针对表格再设置100%即可：

<template>
  <div class="table-page-container">
    <div class="page-header">
        <div>头部</div>
    </div>
    <div class="page-body-table">
      <div class="table-container">
      </div>
    </div>
    <div class="page-footer">
      <div>分页</div>
    </div>
  </div>
</template>
<script setup>
 const tableData = ref([
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ])
</script>
<style lang="scss" scoped>
.table-page-container {
  width: 100%;
  height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  .page-body-table {
    flex: 1;
    position: relative;
    .table-container {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: gray;
    }
  }
}
</style>

全局优化

// 修改 el-table 默认 高度为 100%，表格会根据分辨率事都展示滚动条
Element.Table.props.height.default = '100%'
// 修改 el-table-column 内容过长自动隐藏
Element.TableColumn.props.showOverflowTooltip.default = true