Element Table 表格高度自适应

欲买桂花同载酒。。。

已于 2023-05-08 16:40:50 修改

阅读量130

点赞数

分类专栏：样式自适应文章标签： elementui 前端 Powered by 金山文档

于 2023-03-17 14:51:06 首次发布

本文链接：https://blog.csdn.net/qq_48129943/article/details/129620166

版权

样式自适应专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前是这样写的。。。

getHeight() {
        this.$nextTick(() => {
          this.$refs.multipleTable.$el.getBoundingClientRect().top; //表格距离浏览器的高度
          this.heights = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 20;//20是表格底部需要空出的高度，可自行更改
          // 监听浏览器高度变化，修改表格高度
          window.onresize = () => {
            this.heights = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 20;
          }
        })
},

但是由于每个页面都要用到，所以封装了一下。

utils.js

export function tableHeight() {
 let heights = 0;
    let heightlen = 0;
    let classnameExists = !!document.getElementsByClassName("el-pagination");
    // console.log('classnameExists',classnameExists);
    heightlen = classnameExists ? 55 : 0;

    this.heights = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - heightlen;
    // console.log(this.heights);
    window.onresize = () => {
        this.heights =
            window.innerHeight - this.$refs.multipleTable.$el.offsetTop - heightlen;
    };
}

页面引用

 <template>
  <div>
    <el-table
      ref="multipleTable"
      :data="listData"
      border
      style="width: 100%"
      fit
      size="small"
      v-fit-columns
      scrollbar-always-on
      :height="heights"
    >

  </div>
</template>
<script>
  import { tableHeight } from "@/utils/utils.js"
export default {
......
 mounted() {
   this.$nextTick(() => {
      tableHeight.call(this);
    }) 
  },

这样就OK了，有用的话，不要忘了点赞哦~💪