演示了如何在Grid 中使用列的过滤机制。它可以在定义 Column 时传入 filterable
属性,就象是 editor 类似,可以传入指定类型(type)的组件,如果有额外的组件参数可以在 options
中传入。如果提供了 label
,则会显示在弹出层的上面。
例如常见的下拉选择,vuecoms 编写了一个叫 flat-select 的组件,可以在定义表头列时可以这样写:
{name:'name2', title:'Name2', width:200, filterable: {
type: 'flat-select',
options: {
choices: [
{value: '', label: '全部'},
{value: '>B3', label: '大于 B3'},
{value: '<=B3', label: '小于等于 B3'}
]
}
}},
在展示时,会在表头列名称的右侧显示一个漏斗的图标,当显示为浅灰色时,表示未输入条件,当显示为深色填入图标时,表示用户输入了条件。
过滤器在用户输入时,会立即触发查询,并且会将对应的值传入 onLoadData
的 param
参数中。如上面例子,当选择了 "大于 B3"时,在 param
中会有 {name2: '>B3'}
的内容,因此用户可以根据这个来进行数据的过滤。
下面的示例,则演示了几种过滤组件的写法,以及如何实现前端分页及过滤。是通过 onLoadData
来处理的。