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

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

Vue+ElementUI表格异步加载字段缺失问题详解及解决方案

在Vue和ElementUI项目中，异步加载数据经常导致表格部分字段缺失，本文将深入分析此问题，并提供有效的解决方案。

问题描述：

使用el-table组件显示数据时，从后端获取部分数据（例如申请人ID），然后通过异步请求获取剩余字段（例如申请人姓名、化学品名称等），并动态添加到表格数据中。然而，这些异步获取的字段在页面首次渲染时缺失，只有在打开浏览器开发者工具后才显示。

问题根源：

问题在于数据渲染和异步加载的时机不匹配。el-table组件根据初始数据进行渲染，而异步请求获取的数据在渲染完成后才返回。如果使用循环异步请求，每个请求的完成时间不一致，导致el-table渲染时数据不完整。

代码分析及改进：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

原始代码可能使用了循环和多个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表格异步加载导致字段缺失的问题，确保数据完整性和页面渲染的同步性。