我要评论
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数据。 此优化策略有效避免了因异步操作导致的渲染延迟问题。
以上就是vue+elementui表格渲染延迟：如何解决异步请求导致的数据显示问题？的详细内容，更多请关注代码网其它相关文章！
发表评论