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表格数据渲染延迟问题，确保页面数据完整且高效地呈现。
