中后台管理系统必备: Vue + Element-UI 搜索组件

听我一言

曾有位业界前辈说过:

有表格的地方就有过滤

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 非必传 按钮区域是否隐藏 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 , 私信. 或者加我微信

我改, 还不行嘛!