Vue+ElementUI表格异步加载字段缺失问题详解及解决方案
在Vue和ElementUI项目中，异步加载数据经常导致表格部分字段缺失，本文将深入分析此问题，并提供有效的解决方案。
问题描述：
使用el-table组件显示数据时，从后端获取部分数据（例如申请人ID），然后通过异步请求获取剩余字段（例如申请人姓名、化学品名称等），并动态添加到表格数据中。然而，这些异步获取的字段在页面首次渲染时缺失，只有在打开浏览器开发者工具后才显示。
立即学习“前端免费学习笔记（深入）”；
问题根源：
问题在于数据渲染和异步加载的时机不匹配。el-table组件根据初始数据进行渲染，而异步请求获取的数据在渲染完成后才返回。 如果使用循环异步请求，每个请求的完成时间不一致，导致el-table渲染时数据不完整。
代码分析及改进：
原始代码可能使用了循环和多个await axios.get请求，导致异步操作串行执行，效率低下且容易出现数据加载时机问题。
改进方案：使用Promise.all将所有异步请求并行执行，确保所有数据都获取完成后再更新表格数据。
优化后的代码示例：
async getData() {
await axios.get("http://localhost:10100/Apply/getAllOutApplyPageOfGroup", {
params: {
approvalId: localStorage.getItem("userId"),
pn: this.currentPage,
ps: this.pageSize
}
}).then(res => {
const records = res.data.data.records;
this.total = res.data.data.total;
// 使用 Promise.all 并行获取所有数据
Promise.all(records.map(record => Promise.all([
axios.get("http://localhost:10100/User/getUserName", { params: { userId: record.applicantId } }),
axios.get("http://localhost:10100/Chemicals/getChemicalName", { params: { chemicalId: record.chemicalId } }),
axios.get("http://localhost:10100/Chemicals/getUnit", { params: { chemicalId: record.chemicalId } })
]).then(results => ({
...record,
applicantName: results[0].data.data,
chemicalName: results[1].data.data,
unit: results[2].data.data,
passName: getApprovalStatus(record.isPass) // 使用辅助函数提高代码可读性
})))).then(updatedRecords => {
this.tableData = updatedRecords;
});
});
}
// 辅助函数，提高代码可读性
function getApprovalStatus(status) {
switch (status) {
case "0": return "审核中";
case "1": return "拒绝";
case "2": return "同意";
default: return "";
}
}
通过Promise.all，所有异步请求同时进行，并在全部完成之后一次性更新this.tableData，从而确保el-table组件渲染时拥有完整的数据，解决字段缺失问题。 此外，代码还使用了辅助函数getApprovalStatus，提高了代码的可读性和可维护性。
通过以上改进，可以有效解决Vue+ElementUI表格异步加载导致字段缺失的问题，确保数据完整性和页面渲染的同步性。
