vue使用vue.set方法成功，但是页面没有渲染成功

最新推荐文章于 2023-07-05 17:46:27 发布

原创最新推荐文章于 2023-07-05 17:46:27 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue中使Element UI的表格高度随浏览器窗口大小自适应，并使用$forceUpdate解决页面渲染不及时的问题。适用于动态调整布局或数据变更后的视图更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我这里的是设置table的max-height高度随着浏览器的变化而变化：

<el-table ref="multipleTable" :data="PageData.data" tooltip-effect="dark" class="table_top" :max-height="$Config.tableHeight" v-loading="loading" border>
      <el-table-column v-for="(item,index) in datas" :key="index" :show-overflow-tooltip="item=='goods_name'" :width="item==='goods_price'?'120px':''" :formatter="listtitle_inner" :label="item|capitalize" align="center" header-align="center">
        <template slot-scope="scope">
     	。。。
        </template>
      </el-table-column>
    </el-table>

最开始的时候：

 	var APP = this;
    APP.$Config.tableHeight = APP.getTableHeight("table_top", 150);
    window.onresize = () => {
      APP.$Config.tableHeight = APP.getTableHeight("table_top", 150);
    }

这时候值都是改变了，但是页面上的table的高度并没有随之而改变，这时候加上**APP.$forceUpdate();**就可以实现