设置vue+ele表格高度铺满一屏

<ele-pro-table
        stripe
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :row-click-checked="false"
        :row-click-checked-intelligent="false"
        :toolkit="['fullscreen']"
        :page-sizes="$store.state.page.pagesizes"
        :page-size="$store.state.page.pagesize"
        :toolStyle="{ background: '#fff' }"
        :header-cell-style="{ 'text-align': 'left', background: '#f2f5ff' }"
        :cell-style="{ 'text-align': 'left' }"
        :height="tableHeight"
      >
</ele-pro-table>

  

tableHeight: 50 //默认初始值

  

mounted() {
      this.$nextTick(() => {
        // 根据浏览器高度设置初始高度
        this.tableHeight =
          window.innerHeight - this.$refs.table.$el.offsetTop - 195;
        // 监听浏览器高度变化,改变表格高度
        window.onresize = () => {
          this.tableHeight =
            window.innerHeight - this.$refs.table.$el.offsetTop - 195;
        };
      });
    },

  

posted @ 2022-10-19 14:42  Ao_min  阅读(386)  评论(0编辑  收藏  举报