Vue+ElementUI表格异步加载字段缺失终极解决方案

本文针对Vue+ElementUI表格异步加载数据导致字段缺失的问题，提供详细的解决方案。由于el-table组件渲染时机与异步请求数据返回时机不匹配，导致初始渲染时部分字段缺失。文章分析了问题根源在于异步请求的串行执行和数据渲染的先后顺序，并提出使用`Promise.all`将多个异步请求并行化，确保所有数据获取完成后再更新表格数据，从而解决字段缺失问题。同时，文章还提供了优化后的代码示例和辅助函数，提高代码可读性和可维护性，有效提升页面加载速度和用户体验。 关键词：Vue, ElementUI, 表格, 异步加载, 字段缺失, Promise.all, 数据渲染

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表格异步加载导致字段缺失的问题，确保数据完整性和页面渲染的同步性。

以上就是《Vue+ElementUI表格异步加载字段缺失终极解决方案》的详细内容，更多关于的资料请关注golang学习网公众号！