用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
    ....
}複製代碼

完。