用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
    ....
}复制代码

完。