Using npm:
npm install pmo-filter
/* 引入 */
import Filter from '@/components/filter';
/* 调用 */
<v-filter
:filterData="filterData"
:extraFilterData="extraFilterData" ref="filterComponent">
<div class="filter-btn-area">
<el-button type="primary" @click.stop="handleButtonClick">筛选</el-button>
</div>
</v-filter>
参数 |
说明 |
类型 |
可选值 |
默认值 |
filterData |
默认显示过滤项数据 |
array |
— |
[] |
extraFilterData |
额外过滤项数据 |
array |
— |
[] |
事件名称 |
说明 |
回调参数 |
getFilterData |
获取组件调用组件内的 getFilterData 方法 |
过滤后的数据 |
const filterData = [
// 单选框
{
text: '单选类型',
name: 'userSelect',
type: 'radio',
value: 'radio01',
options: [
{
label: '单选1',
value: 'radio01'
},
{
label: '单选2',
value: 'radio02'
},
{
label: '单选3',
value: 'radio03'
},
{
label: '单选4',
value: 'radio04'
}
]
},
// 多选框
{
text: '多选类型',
name: 'kapian',
type: 'checkbox',
value: [],
options: [
{
label: '多选一',
value: 'checkbox1'
},
{
label: '多选二',
value: 'checkbox2'
},
{
label: '多选三',
value: 'checkbox3'
}
]
},
// 固定日期
{
text: '单日期类型',
name: 'online',
type: 'date',
value: ''
},
// 日期范围
{
text: '开始结束日期类型',
name: 'customTime',
type: 'daterange',
value: {
begin: '',
end: ''
}
},
// 文本类型
{
text: '文本类型',
name: 'desc',
type: 'input',
value: ''
}
];