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

---

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

2018-10-01 15:08:50

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