element ui表格组件 扩展行展开时通过@expand-change异步加载数据，页面不更新问题，第一次展开没有数据，第二次点击显示

补充：最近开始学习vue源码，在看到数据响应的原理的时候，发现了这个问题的根本原因，那就是vue的数据侦测无法检测对象属性的新增和减少，而我异步去获取的数据是使用对象的键值形式来保存，那么新增的键，也就是属性无法被检测到，这时就需要使用Vue.set来解决

https://vue-js.com/learn-vue/reactive/object.html 源码学习博客

问题描述

在业务中我使用element ui 的表格组件，并利用扩展行来展示更多信息，比如每一行是一种模板的信息，展开行显示一个与该模板关联的文件列表

异步加载的思路是扩展行展开时触发expand-change事件，在事件响应函数中去加载相应行的数据，但是当请求的数据返回并储存在data里后，页面并没有更新数据，也就是data里已经有了文件列表的数据了，但扩展行展开后是空白的，这是因为请求操作是异步的，而扩展行展开和事件触发是同步的，页面在数据返回前就已经渲染了dom了，所以没有将新数据渲染到页面上。

想让页面更新，就需要触发vue对视图的渲染，当我们二次展开该行，或者展开其他行时都会触发视图渲染，使得新数据在页面上得以显示，但无论是点击两次，还是展开其他行来更新当前行，都不是用户体验良好的解决办法

于是我去官网搜索如何触发视图的渲染，并找到如下方法

 使用Vue.set来给data里的属性赋值，而不是直接用“=”来赋值，因为Vue.set会立即触发视图更新，这样就可以正常显示异步请求返回的数据了

具体使用方法是在请求的回调函数中，如axios的then方法里，使用self.$set(......)把返回结果赋值给data里的某个属性(外部self=this)，而不是this.data.someAttr = res.data

如果有用的话，请点个赞哦