element-ui 表格el-table高度不是一个固定值时固定表头

最新推荐文章于 2025-06-11 20:04:00 发布

小玲子小玲子

最新推荐文章于 2025-06-11 20:04:00 发布

阅读量5.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： elementui 文章标签： ui vue.js elementui

本文链接：https://blog.youkuaiyun.com/lingliu0824/article/details/128562551

elementui 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何在ElementUI中使用表格组件的height属性配合CSSflex布局，以实现表格自动填充页面中其他元素占据后剩余的空间，同时保持固定表头的效果。关键步骤包括：使用flex布局的父容器，设置包裹表格的子容器为flex:1，以及在el-table中设置height=100%。

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

elementui中为表格组件提供了height属性实现固定表头
在这里插入图片描述

height可以为数字或者字符串，当为一个数字时表示固定的高度，也可以为百分比等字符串。
当height不是一个固定值时，如期望表格可以填充完页面剩余空间，并且固定表头时，可以通过给height属性赋值字符串形式实现。以页面中包含3部分，希望table组件填充其他两部分占据的页面剩余的部分为例：
在这里插入图片描述

**1.使用一个单独的标签包裹el-table组件，父级组件使用flex纵向布局,父级的高度需要确定（通过固定px或者百分比或者其父级也是纵向flex布局，其设置flex:1来确定高度）
2.设置包裹table组件的标签flex:1
3.在el-table中添加属性height=“100%”**注意是设置height属性，不是设置style

<template>
  <div class="content">
    <div class="child1">
      <span>这是一个子标签,内容和高度不固定</span>
    </div>
    <div class="custom-table">
      <el-table
        :data="tableData"
        height="100%"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="child1">
      <span>这也是一个子标签</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

<style scoped>
.content{
  height:240px;/* 可以根据需要设置,也可以是百分比或者在父级flex布局中通过flex:1来确定高度 */
  display: flex;
  flex-direction: column;
}
.custom-table{
  flex: 1;
  overflow: hidden;
}
</style>