element table 表头固定,表格高度自适应

最新推荐文章于 2024-05-29 14:59:22 发布

别拿曾经看以后~

最新推荐文章于 2024-05-29 14:59:22 发布

阅读量710

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

原文链接：https://www.jianshu.com/p/4fe952c4cb88

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

//通过 :height="tableHeight" 设置
<el-table>
  :height="tableHeight"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        class="tab_info"
        style="width: 100%"
        default-expand-all
        row-key="id"
        :row-class-name="tableRowClassName"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleSelectionChange"
        v-loading="loading"
</el-table>
export default {
  data() {
      return {
tableHeight:500 , // 自己设置高度
            }
      },
  mounted() {
    //固定表头
    this.$nextTick(function() {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 50;

      // 监听窗口大小变化
      let self = this;
      window.onresize = function() {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 50;
      };
    });
  },
}