Vue IView之table元件化學習（二）

最基本的繫結table是這樣的，需要columns和data兩個屬性。

**栗子

效果如下：

可以發現這樣每次都需要頻繁的指定列明和屬性，所以我們用了下面的這種辦法；定義物件列表（當然，這裡就忽略了非同步請求）

created(),,,,]}

因為我們需要指定columns，其中就是表頭，所以我們應該去提取其中乙個物件的列名陣列，然後push到乙個屬性裡。這樣我們的就實現了，那我們如何獲取裡面的屬性名呢？

for(let x in this.prolist[0]))
}

還有需要注意的是，我們繫結的title只能是英文名，這種情況你只能和後台協同，看看能不能返回displayname了，如果你想返回的話，你看看我剛發布的文章：

然後直接拼寫其中的key和title即可，那麼我們也只能這麼搞了。

如果你說你的後台傳過來了displayname，你可以這麼搞。假如資料中已經有displayname（這個資料你自己填吧，我就不貼了）

created(),,]
var obj_display_model = this.prolist[this.prolist.length-1];
for(var keyparmas in obj_display_model))}}

在webapi中你的後台在構建這玩膩的時候，你放到最後，直接拼就好了。當然，這樣還是不夠完美的，那如果我們有n個元件，我們就要寫這樣的重複**嗎？我們直接建立my-table的元件，其定義也是非常的簡單。

這樣table的自定義元件就ok了，那我們看看呼叫。

import mytable from './my-table.vue'
export default ,

列表絕對是有按鈕的，它是進行了一定的操作。

this.headers.push(,
style: ,
on: }
}, '編輯'),
createelement('button', ,
on: }
}, '刪除')
]);}
})

其中render給我們提供了render，通過render我們可以建立dom物件以及一些引數指向的方法，它們指向的方法你直接寫到method中就可以了。那我們如何知道id呢，畢竟我們都是根據id去幹一些事情。

你指定的方法的引數就是你的id。

table-filter如何使用？

this.headers[2]["filters"]=[,];
this.headers[2]["filtermethod"]=(e,row)=>

其中filters是你的過濾體條件，下面如圖所示。

以上就是關於iview結合vue的使用，覺得可以的點個推薦吧。