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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求场景:

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

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

在这里插入图片描述


代码展示

提示:这里直接展示代码,其实比较简单:

原理:就是利用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
### Element UI el-table 自适应高度解决方案 为了使 `el-table` 组件能够自适应高度并保持良好的用户体验,可以通过创建个自定义指令来动态调整表格高度。这种方法不仅减少了代码冗余,还提高了项目的可维护性和灵活性。 #### 使用自定义指令实现表单高度自动适配 通过监听窗口大小变化事件,在每次触发时重新计算表格容器的实际可用空间,并相应更新表格高度属性[^1]: ```javascript // 定义全局指令 v-resize Vue.directive('resize', { bind(el, binding) { const handleResize = () => { let windowHeight = window.innerHeight; let otherElementsHeight = /* 计算其他元素占用的空间 */; // 设置 table 的最大高度 el.style.maxHeight = `${windowHeight - otherElementsHeight}px`; }; // 初始化时执行次 handleResize(); // 添加 resize 事件监听器 window.addEventListener('resize', handleResize); // 解绑函数用于清理资源 el.__handleResize__ = handleResize; }, unbind(el) { // 移除 event listener 防止内存泄漏 if (el && el.__handleResize__) { window.removeEventListener('resize', el.__handleResize__); } } }); ``` 接着可以在模板中应用此指令到目标表格上: ```html <template> <div class="table-container"> <!-- 应用自定义指令 --> <el-table v-resize :data="tableData"></el-table> </div> </template> <style scoped> .table-container { position: relative; /* 确保父级定位 */ } </style> ``` 此外,还可以进步优化逻辑以支持更复杂的场景,比如当页面内存在多个折叠面板或其他交互控件影响布局结构的情况下,确保这些变动也能被及时响应和处理[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值