Vue+ElementUI表格数据渲染延迟及优化策略
在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更新机制，从而显示数据。
解决方案：并发请求与Promise.all
避免同步循环和多次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数据。 此优化策略有效避免了因异步操作导致的渲染延迟问题。
