Vue ElementUI table rendering delay: How to solve the data display problem caused by asynchronous requests?

Vue ElementUI table data rendering delay and optimization strategy

Tabular data rendering latency is a common problem in Vue and ElementUI projects. This article will analyze a case where some fields in the table cannot be displayed when the page is loaded and will only be displayed after opening the browser developer tools.

Problem description:

A page that uses the el-table component to display the application record requires obtaining the applicant ID from the backend, and then obtaining the applicant's name and other information through the loop call interface, and dynamically adding it to tableData . After the page loads, fields such as applicant name are missing and will only be displayed after opening the developer tool. The original code is as follows:

 async getdata() {
    await axios.get("http://localhost:10100/apply/getalloutapplypageofgroup", {
        params: {
            approval: 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
        })

        // ... Other asynchronous requests...
    }
}

This code calls the getdata method during mounted lifecycle. The root cause of the problem is that a large number of await keywords are used in getdata function, which leads to synchronization loops and causes data rendering delays. Turning on the developer tool may accidentally trigger the Vue update mechanism, thus displaying the data.

Solution: Concurrent requests with Promise.all

Avoid synchronous loops and multiple await , the code should be optimized, the asynchronous requests should be changed to concurrent requests, and the data should be updated using Promise.all . The improved code is as follows:

 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); // Wait for all requests to complete this.$forceUpdate(); // Force update view}

Through Promise.all , multiple asynchronous requests are executed concurrently, which significantly improves efficiency and solves data display delay. After all data acquisition is completed, update tableData and use this.$forceUpdate() to force update the view to ensure that the data is displayed correctly in el-table .

Remember to properly bind tableData data in el-table . This optimization strategy effectively avoids rendering delay problems caused by asynchronous operations.

The above is the detailed content of Vue ElementUI table rendering delay: How to solve the data display problem caused by asynchronous requests?. For more information, please follow other related articles on the PHP Chinese website!