Vue+ElementUI表格异步加载：字段缺失解决方案及完整代码示例

本文针对Vue+ElementUI表格异步加载数据导致字段缺失的问题，提供了解决方案。由于异步请求与el-table渲染时机不一致，导致初始加载时表格字段缺失。文章分析了问题根源：使用`await`只能等待单个请求，而非所有请求完成后再更新视图。解决方案是使用`Promise.all`，将所有异步请求放在一起执行，确保所有数据加载完成后再更新`el-table`数据，从而避免字段缺失，提升用户体验。文章通过对比修改前后代码，清晰地展现了问题的解决过程，并附带了实际案例，适合Vue开发者参考学习。

Vue+ElementUI表格异步加载数据导致字段缺失的解决方案

在使用Vue和ElementUI构建应用时，异步数据加载常常会导致视图更新与数据加载时机不匹配，从而出现字段缺失等问题。本文将分析一个实际案例，并提供有效的解决方案。

问题描述： 一个使用el-table组件显示申请记录的应用，数据需要通过多个异步请求获取。初始加载时，申请人姓名等关键字段缺失，只有在打开浏览器开发者工具（F12）后才显示。根本原因在于异步请求完成的时机与el-table渲染的时机不一致。

以下是一个存在问题的代码片段：

async getdata() {
    await axios.get("http://localhost:10100/apply/getalloutapplypageofgroup", {
        // ...请求参数...
    }).then(res => {
        this.tabledata = res.data.data.records;
        this.total = res.data.data.total;
    });

    for (let i = 0; i < this.tabledata.length; i++) {
        await axios.get("http://localhost:10100/user/getusername", {
            params: { userid: this.tabledata[i].applicantid }
        }).then(res => {
            this.tabledata[i].applicantname = res.data.data;
        });
        // ... 其他异步请求 ...
    }
}

getdata函数在mounted生命周期中调用。虽然使用了await，但它只等待每个单个请求完成，并非所有请求都完成后再更新视图。 this.tabledata赋值给el-table时，后续请求仍在进行，导致字段缺失。开发者工具的打开可能触发了页面重新渲染，从而显示完整数据。

解决方案：使用Promise.all

为了确保所有异步请求完成后再更新视图，应将所有异步操作放在Promise.all中。修改后的代码如下：

async getData() {
    await axios.get("http://localhost:10100/Apply/getAllOutApplyPageOfGroup", {
        // ...请求参数...
    }).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;

        const promises = this.tableData.map(item => 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 } })
        ]));

        Promise.all(promises).then(results => {
            results.forEach((result, index) => {
                this.tableData[index].applicantName = result[0].data.data;
                this.tableData[index].chemicalName = result[1].data.data;
                this.tableData[index].unit = result[2].data.data;
                // ... 其他字段处理 ...
            });
        });
    });
}

Promise.all确保所有请求完成后再更新this.tableData，从而解决数据显示不完整的问题，保证页面初始加载时显示所有字段。 这避免了异步操作与视图更新的时机冲突。

好了，本文到此结束，带大家了解了《Vue+ElementUI表格异步加载：字段缺失解决方案及完整代码示例》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！