Vue+ElementUI表格数据渲染延迟：如何解决异步请求导致的页面数据缺失问题？

Vue+ElementUI表格数据异步加载导致渲染延迟问题及解决方案

在Vue和ElementUI项目中，异步请求常常导致表格数据渲染延迟，甚至出现数据缺失的情况。本文将分析一个典型案例，并提供有效的解决方案。

问题描述： 一个使用el-table组件显示申请记录的页面，需要异步获取申请人姓名、化学品名称等信息。页面加载后，这些字段缺失，只有在打开浏览器开发者工具后才显示。

问题代码：

立即学习“前端免费学习笔记（深入）”；

async getdata() {    await axios.get("http://localhost:10100/apply/getalloutapplypageofgroup", {        params: {            approvalid: localStorage.getItem("userid"),            pn: this.currentpage,            ps: this.pagesize        }    }).then(res => {        this.tabledata = res.data.data.records;        this.total = res.data.data.total;    });    for (var i in this.tabledata) {        await axios.get("http://localhost:10100/user/getusername", {            params: {                userid: this.tabledata[i].applicantid            }        }).then(res => {            this.tabledata[i].applicantname = res.data.data;        });        // ... 其他异步请求 ...    }}

登录后复制