advanced-filter

安装

npm install ad-filter

引入

main.js

import AdFilter from 'ad-filter' 
import 'ad-filter/lib/ad-filter.css'

demo.vue

<template>
  <div id="app">
      <adFilter :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 |选项的值|