用Proxy 在 Vue 中解决动态加载数据的需求

最近在用vue开发项目，在项目里使用了一套 名叫 iview的ui组件库
这个ui库有挺多的组件可以选择

现在碰到这么个需求

table嵌套table 的多级展开

具体如下图

看起来很简单是吧

但是对于这个table来讲就不一样了，你拿不到该行引用值!.....

这个table的源码是这么传值的...

也就是那一行点开的次级table数据很难与当前行产生关联，这就造成了 你的次级table数据很难直接绑定，而table的初始化需要这些参数

其中的 this.subTableProxy 初始化时为空

所以就需要产生一个当前行与次级table的对应关系 ， 这里第一列的数据是不同的所以就想到了使用第一列的数据当区分值

说白了就是这个 this.subTableProxy 的代理对访问者进行了提前 “布置” 当要访问的属性不存在的时候根据业务的需求生成了不同类型的对象以供访问。
每次只需要请求数据 然后赋值给相应的属性就可以了

比如

async loadTable(row){
    ...
    col_name = row.category_name1||row.category_name2
    this.subtableProxy[col_name].loading = true
    let res = await $http.get('/xxxx/xxx/xx', params)
    this.subtableProxy[col_name].data = res.data.data.rows
    this.subtableProxy[col_name].loading = false
    ....
}

完。