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

[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:"时间"}] 

    });

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