解决Element表格展开行异步获取数据页面不更新

在Vue2版本的el-table的@expand-change="expandChange"事件里，如果使用了接口异步获取数据，会出现第一次点开展开按钮没有数据，第二次展开才渲染出数据的情况。

问题原因

这是因为在接口里给列表的新增属性赋值时后添加的属性没有被Vue的对象代理给检测到

expandChange(row, expandedRows) {
      this.fetchData()
        .then(res => {
          row.newList = res // 直接给row对象里的新属性赋值，这个属性是不会有响应式的
        })
}

解决方法

在获取列表时，给列表中的每个对象提前定义好属性。

// 使用map新返回一个数组并赋值给tableData
this.tableData = apiData.map(item => {
        return {
          ...item,
          newList: [], // 需要新增的属性
        }
})

// 或者使用forEach搭配this.$set()使用
this.tableData = data;
this.tableData.forEach(item => {
  // item.newList= []; // 不能直接给新属性赋值，一样是无效的必须使用this.$set()
  this.$set(item, 'newList', []); // 必须使用this.$set()才能使属性具有响应式
});

之后在@expand-change事件里就可以直接使用row.newList进行赋值，页面便会触发响应式更新

expandChange(row, expandedRows) {
      this.fetchData()
        .then(res => {
          row.newList= res // row里的newList已经被提前声明，具有响应式后就可以直接赋值触发页面更新了
        })
}