0.1.1 • Published 5 years ago
kr-filter v0.1.1
advanced-filter
安装
npm install kr-filter引入
main.js
import KrFilter from "kr-filter";
import "kr-filter/lib/kr-filter.css";
Vue.use(krFilter);demo.vue
<template>
<div id="app">
<krFilter :config="tagTable" @doFilter="search" />
</div>
</template>Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| config | 配置项 | Array | [] |
| separator | 多选状态下参数间的分隔符 | String | ; |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| doFilter | 点击筛选时触发 | 导出的筛选参数(Object) |
Config 参数详解
参数示例：
[
{
key: "type",
content: "类型",
multiple: true,
type: "select",
separator: "QQQ",
color: "red",
background: "#0f0faa",
options: [
{
label: "类型1",
value: "type1"
},
{
label: "类型2",
value: "type2"
}
]
},
{
key: "status",
content: "状态",
multiple: false,
type: "select",
options: [
{
label: "状态1",
value: "status1"
},
{
label: "状态2",
value: "status2"
}
]
},
{
key: "keyword",
content: "关键字",
type: "input"
},
{
key: "dateRange",
content: "日期范围",
type: "dateRange",
multiple: false
},
{
key: "date",
content: "日期",
type: "date",
multiple: true
}
];参数说明：
config 数组中，每一个 object 都代表要配置的可供选择的参数项，object 中参数具体解析如下：
config:
| 事件名称 | 说明 | 类型 | 可选值 | |
|---|---|---|---|---|
| key | 筛选参数的 key 值（必须唯一） | String | ||
| content | 该参数展示在组件上的名称 | String | ||
| type | 筛选项类型 | String | "select","input","date","dateRange" | |
| multiple | 是否多选 | Boolean | true、false (默认 false) | |
| separator | 多选时多个值之间的分隔符(仅在多选时有效) | String | 在未指定时使用外部传入的 attribute 中公共的 separator 参数 | |
| options | 下拉选项(仅在 type 为"select"时可用) | Array | ||
| color | 标签字体颜色（不设定则取用默认颜色） | String | ||
| background | 标签背景色（不设定则取用默认颜色） | String |
type:
| 类型名称 | 说明 |
|---|---|
| select | 单选、多选类型筛选项，需配置 options 参数 |
| input | 输入类型参数 |
| date | 日期类型参数 |
| dateRange | 日期范围类型参数 |
options:
options 仅在 type 为 select 类型的选项中可用:
示例：
options: [
{
label: "状态1",
value: "status1"
},
{
label: "状态2",
value: "status2"
}
];| 参数 | 说明 |
|---|---|
| label | 该选项展示的文字 |
| value | 选项的值 |