Vue+ElementUI表格渲染慢？异步请求数据缺失解决方法！

Vue+ElementUI表格数据渲染延迟问题困扰着许多开发者，尤其在异步请求场景下，页面数据常常缺失或显示不完整。本文针对Vue+ElementUI项目中el-table组件异步加载数据导致的渲染延迟问题，深入分析了其根本原因：循环异步请求导致的串行执行效率低下。文章通过一个典型案例，详细讲解了如何使用`Promise.all`优化异步请求，将串行请求转换为并行请求，并结合`this.$forceUpdate()`强制更新视图，最终有效解决了数据渲染延迟和数据缺失问题，确保页面数据完整且高效呈现。

Vue+ElementUI表格数据异步加载导致渲染延迟问题及解决方案

在Vue和ElementUI项目中，异步请求常常导致表格数据渲染延迟，甚至出现数据缺失的情况。本文将分析一个典型案例，并提供有效的解决方案。

问题描述： 一个使用el-table组件显示申请记录的页面，需要异步获取申请人姓名、化学品名称等信息。页面加载后，这些字段缺失，只有在打开浏览器开发者工具后才显示。

问题代码：

async getdata() {
    await axios.get("http://localhost:10100/apply/getalloutapplypageofgroup", {
        params: {
            approvalid: localStorage.getItem("userid"),
            pn: this.currentpage,
            ps: this.pagesize
        }
    }).then(res => {
        this.tabledata = res.data.data.records;
        this.total = res.data.data.total;
    });

    for (var i in this.tabledata) {
        await axios.get("http://localhost:10100/user/getusername", {
            params: {
                userid: this.tabledata[i].applicantid
            }
        }).then(res => {
            this.tabledata[i].applicantname = res.data.data;
        });

        // ... 其他异步请求 ...
    }
}

问题根源： 代码中使用循环和await，导致异步请求串行执行，效率低下。getdata函数执行完毕后，tabledata可能未完全填充，造成页面渲染不完整。开发者工具的刷新机制可能触发Vue的响应式系统更新视图。

解决方案：使用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;

        Promise.all(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 } })
        ]).then(([userNameRes, chemicalNameRes, unitRes]) => {
            item.applicantName = userNameRes.data.data;
            item.chemicalName = chemicalNameRes.data.data;
            item.unit = unitRes.data.data;
        }))).then(() => {
            this.$forceUpdate(); // 可选，强制更新视图
        });
    });
}

通过Promise.all，所有异步请求并行执行，显著提高效率。数据填充完成后，this.$forceUpdate()（可选）强制更新视图，确保所有数据正确显示。 localStorage.getItem 应改为 localStorage.getItem。

通过以上优化，可以有效解决Vue+ElementUI表格数据渲染延迟问题，确保页面数据完整且高效地呈现。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~