在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
