Vue+ElementUI表格异步加载导致字段缺失：如何解决数据渲染与加载时机不匹配问题？

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 "";
    }
}