Vue ElementUI表格數(shù)據(jù)渲染延遲及優(yōu)化策略

在Vue和ElementUI項(xiàng)目中，表格數(shù)據(jù)渲染延遲是一個(gè)常見問題。本文將分析一個(gè)案例，該案例中表格部分字段在頁面加載時(shí)無法顯示，只有在打開瀏覽器開發(fā)者工具后才顯示。

問題描述：

一個(gè)使用el-table組件顯示申請(qǐng)記錄的頁面，需要從后端獲取申請(qǐng)人ID，再通過循環(huán)調(diào)用接口獲取申請(qǐng)人姓名等信息，并動(dòng)態(tài)添加到tableData中。頁面加載后，申請(qǐng)人姓名等字段缺失，只有打開開發(fā)者工具后才顯示。 原始代碼如下：

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

        // ... 其他異步請(qǐng)求 ...
    }
}

該代碼在mounted生命周期中調(diào)用getdata方法。問題根源在于getdata函數(shù)中使用了大量的await關(guān)鍵字，導(dǎo)致同步循環(huán)，造成數(shù)據(jù)渲染延遲。打開開發(fā)者工具可能會(huì)意外觸發(fā)Vue更新機(jī)制，從而顯示數(shù)據(jù)。

解決方案：并發(fā)請(qǐng)求與Promise.all

避免同步循環(huán)和多次await，應(yīng)優(yōu)化代碼，將異步請(qǐng)求改為并發(fā)請(qǐng)求，使用Promise.all等待所有請(qǐng)求完成后再更新數(shù)據(jù)。改進(jìn)后的代碼如下：

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); // 等待所有請(qǐng)求完成
    this.$forceUpdate();//強(qiáng)制更新視圖
}

通過Promise.all，并發(fā)執(zhí)行多個(gè)異步請(qǐng)求，顯著提升效率，解決數(shù)據(jù)顯示延遲。 所有數(shù)據(jù)獲取完成后再更新tableData，并使用this.$forceUpdate()強(qiáng)制更新視圖，確保數(shù)據(jù)正確顯示在el-table中。

記住在el-table中正確綁定tableData數(shù)據(jù)。 此優(yōu)化策略有效避免了因異步操作導(dǎo)致的渲染延遲問題。

以上是Vue ElementUI表格渲染延遲：如何解決異步請(qǐng)求導(dǎo)致的數(shù)據(jù)顯示問題？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！