在Vue和ElementUI项目中，表格数据渲染延迟是一个常见问题。本文将分析一个案例，该案例中表格部分字段在页面加载时无法显示，只有在打开浏览器开发者工具后才显示。
问题描述：
一个使用el-table组件显示申请记录的页面，需要从后端获取申请人ID，再通过循环调用接口获取申请人姓名等信息，并动态添加到tableData中。页面加载后，申请人姓名等字段缺失，只有打开开发者工具后才显示。 原始代码如下：
立即学习“前端免费学习笔记（深入）”；
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 }) // ... 其他异步请求 ... } }
该代码在mounted生命周期中调用getdata方法。问题根源在于getdata函数中使用了大量的await关键字，导致同步循环，造成数据渲染延迟。打开开发者工具可能会意外触发Vue更新机制，从而显示数据。
避免同步循环和多次await，应优化代码，将异步请求改为并发请求，使用Promise.all等待所有请求完成后再更新数据。改进后的代码如下：
async getData() { const applyData = await axios.get("http://localhost:10100/Apply/getAllOutApplyPageOfGroup", { params: { approvalId: localStorage.getItem("userId"), pn: this.currentPage, ps: this.pageSize } }); this.tableData = applyData.data.data.records; this.total = applyData.data.data.total; const promises = this.tableData.map(item => { return Promise.all([ axios.get("http://localhost:10100/User/getUserName", { params: { userId: item.applicantId } }), axios.get("http://localhost:10100/Chemicals/getChemicalName", { params: { chemicalId: item.chemicalId } }), axios.get("http://localhost:10100/Chemicals/getUnit", { params: { chemicalId: item.chemicalId } }) ]).then(([userNameRes, chemicalNameRes, unitRes]) => { item.applicantName = userNameRes.data.data; item.chemicalName = chemicalNameRes.data.data; item.unit = unitRes.data.data; }); }); await Promise.all(promises); // 等待所有请求完成 this.$forceUpdate();//强制更新视图 }
通过Promise.all，并发执行多个异步请求，显著提升效率，解决数据显示延迟。 所有数据获取完成后再更新tableData，并使用this.$forceUpdate()强制更新视图，确保数据正确显示在el-table中。
记住在el-table中正确绑定tableData数据。 此优化策略有效避免了因异步操作导致的渲染延迟问题。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
