首页 > 其他 > 详细

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

时间:2018-10-01 19:42:03      阅读:290      评论:0      收藏:0      [点我收藏+]

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

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

原文:https://www.cnblogs.com/lmmmmmx/p/9735322.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!