iview Table組件使用過濾器時沒法加載表頭解決辦法

---

title: iview Table組件使用過濾器時沒法加載表頭解決辦法
date: 2018-10-01 15:08:50
tags:

• JavaScript
• 前端
• vue

• iview

  所遇到的問題

  使用iview搭建社團用人員管理時,Table組件的columns中filters屬性設置爲Vue data 中的另外一個對象

  以下:

data() {
groupFilter: [],
memberCol: [
{
title: "組別",
render: (h, params) => {
return h("div", [h("span", params.row.group.groupName)]);
},
filters: [this.groupFilter],
filterMultiple: true,
filterMethod(value, row) {
return row.group.groupName == value;
}
}
]
}

後沒法顯示錶頭,並報錯
TypeError: Cannot read property 'value' of undefined

此對象會在Vue created時調取後臺組別數據後被賦值

解決方法:

將data中columns的過濾器置空:

filters: []

並在調取後臺數據後賦值給過濾器:

Util.ajax({
method: "GET",
url: "/group/list"
}).then(res => {
self.groupList = res.data;
self.groupList.forEach(group => {
self.groupFilter.push({
label: group.groupName,
value: group.groupName
});
});
self.memberCol[4].filters = self.groupFilter;
});