iview table component cannot load header solution when using filters

Title:iview table component cannot load header solution when using filters
Date:2018-10-01 15:08:50
Tags

• Javascript
• Front
• Vue
• IView the problems encountered by the

  Using iview to build a community with people management, the filters property in the table component's columns is set to another object in Vue data

  As follows:

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

Unable to display the table header and error
Typeerror:cannot Read Property ' value ' of undefined

This object will be assigned after the background group data is taken from Vue created Si Cho

Workaround:

Empty the columns filter in data:

filters: []

And after the background data is transferred to the filter to assign value:

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

iview table component cannot load header solution when using filters