# Filter Bar 筛选器
筛选器用于列表筛选。目前已内置在通用列表组件内。即，目前无需自行引入。如需在其他组件内引入，参考如何引入。
# 如何引入
import filterBar from '@/components/filter-bar'
export default {
name: '',
components: {
filterBar
},
...
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 使用示例
你可以直接复制使用此处代码
<filter-bar
v-model="params"
:filters="filters",
col="1"
extraCol="3"
width="200"
></filter-bar>
<script>
export default {
data () {
return {
params: {},
// 可以传入预置筛选字段的键值、或自定义筛选字段
filters: ['meterNo', 'meterType', {
label: '安装日期',
field: 'installDate',
type: 'datepicker',
innerType: 'date',
value: '',
style: 'width: 150px;'
}]
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 属性
| 属性名称 | 属性说明 | 默认值 |
|---|---|---|
| filters | [Array] 筛选字段配置 具体配置参见 filters 配置 | 无 |
| value | [Object] 默认参数输入 用于 v-model 双向绑定，无需单独使用 通过该参数可以设置默认筛选值 | 无 |
外观配置参数
此外，筛选工具条支持基础外观配置，参考本节下方筛选工具条外观配置
# 事件
| 事件名称 | 事件说明 |
|---|---|
| input | 组件内筛选参数更新时，将抛出该事件，并携带更新后筛选参数数据 用于 v-model 双向绑定，无需单独使用 |
| change | 组件内筛选参数更新时，将抛出该事件，并携带更新后筛选参数数据 该事件将在 input 事件之后抛出 |
# 详细配置
该组件内置了多个预设筛选字段配置，传入时即可通过预设关键字使用预设筛选条件。
# 预设筛选字段
将常用字段配置为预设字段，可极大改善列表、表单、筛选条控件的配置体验。
WARNING
不建议修改已配置的预设字段，有可能影响其他使用了此预设字段的页面功能。如需修改请先进行细致的分析并咨询前端开发人员。
预设筛选字段和自定义筛选字段的配置参数完全一致。
| 关键字 | 说明 |
|---|---|
| meterNo | 表具编号 |
| meterType | 表具类型 |
| meterStatus | 表具状态 |
| installDate | 安装日期 |
| custName | 客户名称 |
| custNo | 客户编号 |
| custStatus | 客户状态 |
| addrDes | 地址描述 |
| custType | 客户类型 |
各关键字详细配置请查看
src/components/filter-bar/filters.json
# 自定义筛选字段属性说明
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| label | [String] 字段描述 | 无 |
| field | [String] 字段名称 | 无 |
| type | [String] 输入类型 可选值 input/select/checkbox/radio/datepicker/timepicker/cascader | input |
| innerType | [String] 内部类型 对应 element-ui 相应组件的 type 属性配置 | 无 |
| value | [String|Number|Boolean|Array|Object] 字段默认值 如果选单值是基本类型，应设置为空字符串 如果选单值是数组，应设置为 [] | 无 |
| options | [Array] 为 type 值为 select/checkbox/radio/cascader 的字段 设置候选值 | 无 |
| className | [String] 自定义样式名 | 无 |
| style | [String] 自定义内嵌样式 | 无 |
| clearable | [Boolean] 显示清空按钮 | true |
| disabled | [Boolean] 是否禁用 | false |
| autofocus | [Boolean] 是否自动获取焦点 | false |
| readonly | [Boolean] 是否只读 | false |
| multiple | [Boolean] 是否多选 type 值为 select 时有效 | false |
| filterable | [Boolean] 是否可筛选 type 值为 select 时有效 | false |
| filter-method | [function] 自定义选项筛选方法 type 值为 select 时有效 | 无 |
| extra | [Boolean] 是否标记为额外字段 值为 true，该字段将被折叠，仅当点击展开按钮时可见，以实现高级筛选功能。同时，开发者可以通过添加 %extra 后缀来将预设字段设置为额外字段，例：meterNo%extra | false |
| ... | 其他设置属性，参考 element-ui 表单相关属性设置 | 无 |
# 筛选工具条外观配置
筛选工具条配置用于控制筛选条的尺寸、表单列数、是否显示文本标签等外观属性。
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| col | [Number, String] 主查询条件表单列数 | 1 |
| extraCol | [Number, String] 辅助查询条件表单列数 | 2 |
| showLabel | [Boolean] 主查询条件是否显示文本标签 | false |
| extraShowLabel | [Boolean] 辅助查询条件是否显示文本标签 | true |
| width | [Number, String] 主查询条件表单宽度，单位像素 | 200 |
| extraWidth | [Number, String] 辅助查询条件弹窗宽度，单位像素 | 490 |