内容简介:曾有位业界前辈说过:有表格的地方就有过滤Where there is a table, there is a filter
听我一言
曾有位业界前辈说过:
有表格的地方就有过滤
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> <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 } ] }
这下总可以满足诸多, 繁琐复杂的搜索了吧!
还不能?
那就留言, Issues , 私信. 或者加我微信
我改, 还不行嘛!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Laravel 后台开发常用组件
- goserver 0.0.4 发布,组件式后台服务
- goserver 0.0.4 发布,组件式后台服务
- RSUITE:为后台产品而生的 React 组件库
- 组件式后台服务 goserver 0.2 发布,新增 Lua 支持
- React Suite 3.2.10 发布,用于后台产品的 React 组件库
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。