用Proxy 在 Vue 中解決動態載入資料的需求

張雲鋒發表於2017-09-30
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
    ....
}複製程式碼

完。

相關文章