flex布局下el-table表格高度自适应、表格头部固定

flex布局下el-table表格高度自适应、表格头部固定— vue技术交流群（864583465) (此群满可加2群：111822407）

直接上代码

<template>
  <div class="flex table-height">
    <div class="fixed-height">
      固定高度
    </div>
    <div class="flex main-content">
      <div class="fixed-height">
        固定高度
      </div>
      <div class="table-wrap">
        <el-table
          border
          :data="tableData"
          style="width: 100%;"
          height="100%"
        >
          <el-table-column
            type="index"
            width="50"/>
          <el-table-column
            prop="date"
            label="日期"
            width="180"/>
          <el-table-column
            prop="name"
            label="姓名"
            width="180"/>
          <el-table-column
            prop="address"
            label="地址"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component({})
export default class extends Vue {
  private num: number = 123
  private 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-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }
  ]

}
</script>

<style lang="scss">
.table-height {
  box-sizing: border-box;
  flex-direction: column;
  height: 100%;

  .fixed-height {
    box-sizing: border-box;
    height: 40px;
    border: 1px solid #ddd;
  }

  .main-content {
    flex: 1;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #ccc;
  }

  .table-wrap {
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
  }
}
</style>

注意：
1、el-table外层一定要包裹一个div,并设置css样式如示例代码中的.table-wrap
2、el-table的height属性设置为100%，设置max-height不生效，

欢迎加入vue技术交流群（864583465) (此群满可加2群：111822407），你的问答将是我们大家共同进步的关键！！！