听我一言
曾有位业界前辈说过:
有表格的地方就有过滤
Where there is a table, there is a filter
--- 我瞎说的(手动狗头)
尽管没有大佬说这句话, 但那也意味着, 这就是业界共识. 任何表格如果没有搜索/过滤. 可想而知, 要找到一条想要的数据是何其困难. 鄙人不才, 愿为诸位献上一个搜索/过滤组件, 让你在茫茫数据中找到哪个心仪的祂. 为你省去重复枯燥的 ctrl + c
/ ctrl + v
效果如何?
且看下图
试想一下. 如此之多的搜索条件. template
模板得有多沉? 别说你得业务场景中不会有这么多搜索条件? @产品经理 请发言
告辞!
el-filter 问世
# yarn
yarn add el-filter
# npm
npm install el-filter --save
假装大家都知道: 这个组件是基于
Element-UI
+Vue
开发的吧
// main.js 中引入
import ElFilter from 'el-filter'
...
Vue.use(ElFilter);
...
好了! 这下可以在组件中愉快的使用了
<template>
<div class="page">
<el-filter
:data="filterInfo.data"
:field-list="filterInfo.fieldList"
:list-type-info="listTypeInfo"
@handleFilter="handleFilter"
@handleReset="handleReset"
@handleEvent="handleEvent"
/>
</div>
</template>
data: () => ({
filterInfo: {
// 搜索字段
data: {
name: null,
age: null,
count: 1,
sex: 1,
date: null,
dateTime: null,
range: null
},
// 条件配置项
fieldList: [
{ label: '姓名', type: 'input', value: 'name' },
{ label: '年龄', type: 'input', value: 'age', disabled: true },
{ label: '计数', type: 'inputNumber', value: 'count', min: 1, max: 10 },
{ label: '性别', type: 'select', value: 'sex', list: 'sexList' },
{ label: '日期', type: 'date', value: 'date' },
{ label: '创建时间', type: 'date', value: 'dateTime', dateType: 'datetime', clearable: true },
{ label: '时间区间', type: 'date', value: 'range', dateType: 'daterange' }
]
},
// 下拉数据配置项
listTypeInfo: {
sexList: [
{ id: 1, name: '男' },
{ id: 2, name: '女' },
{ id: 3, name: '保密' }
]
}
}),
// 方法
methods: {
/**搜索 */
handleFilter (row) {
console.log(row)
},
/**重置 */
handleReset (row) {
console.log(row)
},
/**焦点失去事件 */
handleEvent (row) {
console.log(row)
}
}
就这? 那岂不丢失了组件的意义?
DIY的东西可不少嘞
翠花, 上菜!
参数 | 默认 | 数据类型 | 是否必传 | 说明 |
---|---|---|---|---|
data | {} | Object | 必传 | 字段默认数据 |
fieldList | [] | Array | 必传 | 字段配置项 |
listTypeInfo | Object | Object | 非必传 | 下拉列表数据集 |
btnHidden | false | Boolean | 非必传 | 按钮区域是否隐藏 |
foldBtnHidden | false | Boolean | 非必传 | 是否取消折叠功能 |
size | mini | String | 非必传 | 组件尺寸 |
count | 4 | Number | 非必传 | 默认搜索条数 |
width | {labelWidth: 110, itemWidth: 220} | Object | 非必传 | 组件及label宽度 |
btnStyle | [] | Object | 非必传 | 按钮配置项 (见示例 ↓ ) |
按钮配置项示例:
// 示例
btnStyle: [
{ icon: 'el-icon-search', text: '过滤',type: 'primary' },
{ icon: 'el-icon-refresh', text: '重置' }
]
// 组件接受参数值
btnStyle: {
type: Array,
default: () => [
{ icon: null, text: '搜索', disabled: false, type: 'primary', plain: false, round: false },
{ icon: null, text: '重置', disabled: false, type: null, plain: false, round: false }
]
}
这下总可以满足诸多, 繁琐复杂的搜索了吧!
还不能?
那就留言,Issues
我改, 还不行嘛!