中后台管理系统必备: 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 搜索组件


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

查看所有标签

猜你喜欢:

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

金字塔原理

金字塔原理

[美] 巴巴拉·明托 / 王德忠、张珣 / 民主与建设出版社 / 2002-12 / 39.80元

《金字塔原理》是一本讲解写作逻辑与思维逻辑的读物,全书分为四个部分。 第一篇主要对金字塔原理的概念进行了解释,介绍了如何利用这一原理构建基本的金字塔结构。目的是使读者理解和运用简单文书的写作技巧。 第二篇介绍了如何深入细致地把握思维的环节,以保证使用的语句能够真实地反映希望表达的思想要点。书中列举了许多实例,突出了强迫自己进行“冷静思维”对明确表达思想的重要性。 第三篇主要针对的......一起来看看 《金字塔原理》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具