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

发布时间:2024年01月03日

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),你的问答将是我们大家共同进步的关键!!!

文章来源:https://blog.csdn.net/JCAL123/article/details/135366617
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。