iview Table组件使用过滤器时无法加载表头解决办法

Posted 2021-01-09 lmmmmmx

---

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;
});