Listen to my words

An industry veteran once said:

Where there is a table, there is a filter.

No big shot says it, but that means it’s the industry consensus. Any table if not searched/filtered. You can imagine how difficult it is to find a piece of data you want. I would like to present you with a search/filter component that will let you find your favorite one in the vast data. Save you the tedious repetition of CTRL + C/CTRL + V

Business with each other

What was the effect?

And see below

Imagine how heavy a template would have to be with so many search criteria. Don’t tell me your business scenario doesn’t have so many search criteria? Product manager please speak

Say goodbye!

El – filter

# yarn
yarn add el-filter

# npm
npm install el-filter --save
Copy the code

Pretend everyone knows: this component is based on Element-UI + Vue

// in main.js
import ElFilter from 'el-filter'. Vue.use(ElFilter); .Copy the code

All right! This can be used happily in components

<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>
Copy the code
data: (a)= > ({
    filterInfo: {
        // Search the field
        data: {
            name: null.age: null.count: 1.sex: 1.date: null.dateTime: null.range: null
        },
        // Conditional configuration item
        fieldList: [
            { label: 'name'.type: 'input'.value: 'name' },
            { label: 'age'.type: 'input'.value: 'age'.disabled: true },
            { label: 'count'.type: 'inputNumber'.value: 'count'.min: 1.max: 10 },
            { label: 'gender'.type: 'select'.value: 'sex'.list: 'sexList' },
            { label: 'date'.type: 'date'.value: 'date' },
            { label: 'Creation time'.type: 'date'.value: 'dateTime'.dateType: 'datetime'.clearable: true  },
            { label: 'Time interval'.type: 'date'.value: 'range'.dateType: 'daterange'}},// Drop down data configuration items
    listTypeInfo: {
        sexList: [{id: 1.name: 'male' },
            { id: 2.name: 'woman' },
            { id: 3.name: 'secret'}}}),/ / method
methods: {
    Search / * * * /
    handleFilter (row) {
        console.log(row)
    },
    Reset / * * * /
    handleReset (row) {
        console.log(row)
    },
    /** Focus lost event */
    handleEvent (row) {
        console.log(row)
    }
}
Copy the code

Is this it? Doesn’t that miss the point of the component?

There’s a lot of DIY

Cui Hua, serve up!

parameter The default The data type Whether will pass instructions
data {} Object Will pass Field default data
fieldList [] Array Will pass Field configuration item
listTypeInfo Object Object Will not pass Drop – down list data set
btnHidden false Boolean Will not pass Whether the button area is hidden
size mini String Will not pass Component size
count 4 Number Will not pass Default number of search entries
width {labelWidth: 110, itemWidth: 220} Object Will not pass Component and label width
btnStyle [] Object Will not pass Button configuration items (see ↓ for example)

Example button configuration items:

/ / sample
btnStyle: [
  { icon: 'el-icon-search'.text: 'filter'.type: 'primary' },
  { icon: 'el-icon-refresh'.text: 'reset'}]// The component accepts parameter values
btnStyle: {
  type: Array.default: (a)= >[{icon: null.text: 'search'.disabled: false.type: 'primary'.plain: false.round: false },
    { icon: null.text: 'reset'.disabled: false.type: null.plain: false.round: false}}]Copy the code

This can always meet a lot of, tedious and complex search bar!

NPM Address Github address

Also can’t?

Leave a message, Issues, private message. Or add me to wechat

I change, still can’t!