听我一言
曾有位业界前辈说过:
有表格的地方就有过滤
Where there is a table, there is a filter
--- 我瞎说的 (手动狗头)
尽管没有大佬说这句话, 但那也意味着, 这就是业界共识. 任何表格如果没有搜索 / 过滤. 可想而知, 要找到一条想要的数据是何其困难. 鄙人不才, 愿为诸位献上一个搜索 / 过滤组件, 让你在茫茫数据中找到哪个心仪的祂. 为你省去重复枯燥的 ctrl + c / ctrl + v
商业互捧 https://juejin.im/post/5ea408eae51d4546f03daf62
效果如何?
且看下图
试想一下. 如此之多的搜索条件. 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 | 非必传 | 按钮区域是否隐藏 |
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 }
- ]
- }
这下总可以满足诸多, 繁琐复杂的搜索了吧!
NPM 地址 https://www.npmjs.com/package/el-filter
GitHub 地址 https://github.com/wangdaoo/el-filter
还不能?
那就留言, Issues https://github.com/wangdaoo/el-filter/issues , 私信. 或者加我微信
我改, 还不行嘛!
来源: http://www.tuicool.com/articles/QBJvQnz