elementui中為表格組件提供了height屬性實現(xiàn)固定表頭


height可以為數(shù)字或者字符串，當為一個數(shù)字時表示固定的高度，也可以為百分比等字符串。
當height不是一個固定值時，如期望表格可以填充完頁面剩余空間，并且固定表頭時，可以通過給height屬性賦值字符串形式實現(xiàn)。以頁面中包含3部分，希望table組件填充其他兩部分占據的頁面剩余的部分為例：

**1.使用一個單獨的標簽包裹el-table組件，父級組件使用flex縱向布局,父級的高度需要確定（通過固定px或者百分比或者其父級也是縱向flex布局，其設置flex:1來確定高度）
2.設置包裹table組件的標簽flex:1
3.在el-table中添加屬性height=“100%”**注意是設置height屬性，不是設置style文章來源地址http://www.zghlxwxcb.cn/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: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }]
    }
  }
}
</script>

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

到了這里，關于element-ui 表格el-table高度不是一個固定值時固定表頭的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！