解决ElementUI中table组件无法正常加载数据的问题

最新推荐文章于 2025-04-25 20:32:57 发布

TheDesiderata

最新推荐文章于 2025-04-25 20:32:57 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： ElementUI Vue

本文链接：https://blog.youkuaiyun.com/ForgivenCheney/article/details/94552573

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在ElementUI的table组件遇到的数据加载异常问题。当在后端接口未返回时，预先设置的假数据未能正常显示。问题源于JS执行队列，包括setTimeout和Promise的执行顺序。解决方法涉及到DOM渲染与数据状态的管理，确保tableData在渲染时有有效值。示例代码展示了如何避免此类问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[Talk is cheap. Show me the code]

不想看理论知识请直接移步最后代码示例。

问题描述：

将Element中table组件进行了二次封装后，在后端接口未给出时，自己在页面写了一些假数据，但数据赋值过程中，页面未进行正常渲染数据。

解决方法：

Vue.nextTick(()=>{

//确保DOM节点已经生成，在这里对表格进行赋值，===>表格未渲染数据

}）
01未解决问题

mounted(){

//在这里进行数据的赋值==>表格数据未渲染

}
02未解决问题

03.使用setTimeout(()=>{

//在这里进行数据的赋值==>正常渲染数据

})

解决了问题。

由此也引出了JS代码执行队列的问题。

我们先来看下下方代码，请解释下列代码的输出：

console.log("datagrand1")
setTimeout(() => {
    console.log("datagrand2")   
});
const p0 = new Promise((resolve)=>{
    console.log("datagrand3")
    resolve()
})
p0.then(()=>{
   console.log("datagrand4")
})
console.log("datagrand5")
const p1 = new Promise((reject)=>{
   console.log("datagrand6")
   reject()
})
p1.then(()=>{
   console.log("datagrand7")
})



最终执行结果为：1，3，5，6，4，7，2

发现了吗？ setTimeout 是最后执行的，不论你有没有传入时间。
至于Promise 内部是按JS执行顺序（谁在前面谁先执行）执行的，then()的回调方法是异步执行的，执行顺序后于普通JS的。

所以这里table组件没有正常加载数据的可能原因是：DOM渲染过程，tableData为空或者为undefined也有可能中途数据发生了变化导致tableData为空。setTimeout(()=>{}) 让 tableData 保证最终拥有有效值。

当然我们实际生产环境是不需要用延时器来对保证数据有效的，http请求是异步且慢于setTimeout的。

代码示例：

    setTimeout(() => {
        //tableData为表格绑定的值
        this.tableData = [{code:1,name:"车辆"},{code:2,name:"时间"}]  
    });

如果有任何关于本文的意见，请在文章下方留言，我会在看到的第一时间回复。