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; }); // ... 其他异步请求 ... }}
问题根源： 代码中使用循环和await，导致异步请求串行执行，效率低下。getdata函数执行完毕后，tabledata可能未完全填充，造成页面渲染不完整。开发者工具的刷新机制可能触发Vue的响应式系统更新视图。
解决方案：使用Promise.all优化异步请求
为了解决这个问题，我们应该并行执行所有异步请求，并在所有数据都准备好后更新视图。Promise.all可以完美实现这一点。
优化后的代码：
async getData() { await axios.get("http://localhost:10100/Apply/getAllOutApplyPageOfGroup", { // ... }).then(res => { this.tableData = res.data.data.records; this.total = res.data.data.total; Promise.all(this.tableData.map(item => 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; }))).then(() => { this.$forceUpdate(); // 可选，强制更新视图 }); });}
通过Promise.all，所有异步请求并行执行，显著提高效率。数据填充完成后，this.$forceUpdate()（可选）强制更新视图，确保所有数据正确显示。 localStorage.getItem 应改为 localStorage.getItem。
通过以上优化，可以有效解决Vue+ElementUI表格数据渲染延迟问题，确保页面数据完整且高效地呈现。
以上就是Vue+ElementUI表格数据渲染延迟：如何解决异步请求导致的页面数据缺失问题？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1502872.html
微信扫一扫 
支付宝扫一扫 
