Vue ElementUI表格渲染延迟：如何解决异步请求导致的数据显示问题？

Vue ElementUI表格数据渲染延迟及优化策略

在Vue和ElementUI项目中，表格数据渲染延迟是一个常见问题。本文将分析一个案例，该案例中表格部分字段在页面加载时无法显示，只有在打开浏览器开发者工具后才显示。

问题描述：

一个使用el-table组件显示申请记录的页面，需要从后端获取申请人ID，再通过循环调用接口获取申请人姓名等信息，并动态添加到tableData中。页面加载后，申请人姓名等字段缺失，只有打开开发者工具后才显示。 原始代码如下：

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
        })

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

该代码在mounted生命周期中调用getdata方法。问题根源在于getdata函数中使用了大量的await关键字，导致同步循环，造成数据渲染延迟。打开开发者工具可能会意外触发Vue更新机制，从而显示数据。

解决方案：并发请求与Promise.all

避免同步循环和多次await，应优化代码，将异步请求改为并发请求，使用Promise.all等待所有请求完成后再更新数据。改进后的代码如下：

async getData() {
    const applyData = await axios.get("http://localhost:10100/Apply/getAllOutApplyPageOfGroup", {
        params: {
            approvalId: localStorage.getItem("userId"),
            pn: this.currentPage,
            ps: this.pageSize
        }
    });
    this.tableData = applyData.data.data.records;
    this.total = applyData.data.data.total;

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

    await Promise.all(promises); // 等待所有请求完成
    this.$forceUpdate();//强制更新视图
}

通过Promise.all，并发执行多个异步请求，显著提升效率，解决数据显示延迟。 所有数据获取完成后再更新tableData，并使用this.$forceUpdate()强制更新视图，确保数据正确显示在el-table中。

记住在el-table中正确绑定tableData数据。 此优化策略有效避免了因异步操作导致的渲染延迟问题。

以上是Vue ElementUI表格渲染延迟：如何解决异步请求导致的数据显示问题？的详细内容。更多信息请关注PHP中文网其他相关文章！