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

栏目: IT技术 · 发布时间: 4年前

内容简介:曾有位业界前辈说过:有表格的地方就有过滤Where there is a table, there is a filter

听我一言

曾有位业界前辈说过:

有表格的地方就有过滤

Where there is a table, there is a filter

--- 我瞎说的(手动狗头)

尽管没有大佬说这句话, 但那也意味着, 这就是业界共识. 任何表格如果没有搜索/过滤. 可想而知, 要找到一条想要的数据是何其困难. 鄙人不才, 愿为诸位献上一个搜索/过滤组件, 让你在茫茫数据中找到哪个心仪的祂. 为你省去重复枯燥的 ctrl + c / ctrl + v

商业互捧

效果如何?

且看下图

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

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

试想一下. 如此之多的搜索条件. template 模板得有多沉? 别说你得业务场景中不会有这么多搜索条件? @产品经理 请发言

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

告辞!

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 , 私信. 或者加我微信

我改, 还不行嘛!

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Visual C#从入门到精通(第8版)

Visual C#从入门到精通(第8版)

夏普 (John Sharp) / 周靖 / 清华大学出版社 / 2016-6-1

《Visual C#从入门到精通(第8版)》共27章,结构清晰,叙述清楚。所有练习均在Visual Studio 2015简体中文版上进行过全面演练。无论是刚开始接触面向对象编程的新手,还是打算迁移到C#的C、C++或Java程序员,都可以从《Visual C#从入门到精通(第8版)》汲取到新的知识。迅速掌握C#编程技术。一起来看看 《Visual C#从入门到精通(第8版)》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换