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

这篇具有很好参考价值的文章主要介绍了element-ui 表格el-table高度不是一个固定值时固定表头。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

elementui中为表格组件提供了height属性实现固定表头
elementui设置table表头高度,elementui,ui,vue.js,elementui

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

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

<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>