current position:Home>Filters usage of table in elementui

Filters usage of table in elementui

2022-04-29 15:36:36The wind blows and the clouds fly

elementUI-table And filters Data filtering usage

In the process of doing the project a few days ago , Yes elementUI form . The problem encountered at that time was to pass the status code returned from the background , Render it as text data . Because I just took over the code , See in the code filters This attribute , It feels like it can be used to achieve . Until the end , Actually filters It is used for filtering , Now let's learn this knowledge with you .

// The screenshot from elementUI-table Official documents
 Insert picture description here
First, we need to pay attention to these properties :
filters: Filter conditions
filter-method: Filtration method
column-key: If needed filter-change event , You need this attribute to identify which column The screening criteria for
filter-change: This event will be triggered when the filter condition of the table changes , The value of the parameter is an object , Object's key yes column Of columnKey, Corresponding value An array of filter criteria selected for the user .
formatter: According to the condition , Format content rewrite
Let's give you an example , A woman is looking for a boyfriend on some software , The woman offered ( A house , A car , There is a deposit ), This is it. filters. Then he wants to see through the software that those are rich , Those with cars , Or those who have cars, houses and deposits , This is it. filter-method. When he clicks “ A car ” when , Whether the screening conditions have changed ? This is it. filter-change. If there are many women looking for boyfriends on this software , Then there will be many screening conditions , So you need to set column-key To represent each person's own screening criteria . Finally, according to your conditions, several good , You don't know their names , You can use it formatter Come and give them a name , Easy to remember .
 Insert picture description here
As shown in the figure above, the red box is filters The content rendered by the data inside , That is, our filter conditions , It's an array , Each condition is an object , from key,value The formal composition of , As shown in the code below :

 Insert picture description here
* What needs to be noted here is , If you set :filter-multiple( multi-select ) by false, He will automatically help us generate “ All ” This one is .

Next is our filtering method :filter-method
 Insert picture description here
 Insert picture description here
*value: filter ,row: That's ok
Pictured , Code means : return Of this line tag label === filter The item

When you have screening conditions and screening methods , Are you going to screen , Then start screening events filter-change
* Need to set up column-key
* This method is bound to the table el-table Upper
 Insert picture description here
for example :
 Insert picture description here
The last is formatter 了 , Through his rewriting of the content
 Insert picture description here
 Insert picture description here
All the above code screenshots are not related , They are all cut separately for a certain point . So there will be different method names , It's normal .

copyright notice
author[The wind blows and the clouds fly],Please bring the original link to reprint, thank you.

Random recommended