current position：Home>Filters usage of table in elementui
Filters usage of table in elementui
2022-04-29 15:36:36【The wind blows and the clouds fly】
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
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 .
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 ：
* 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
*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
for example ：
The last is formatter 了 , Through his rewriting of the content
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 .
author[The wind blows and the clouds fly],Please bring the original link to reprint, thank you.
The sidebar is recommended
- JQuery realizes picture switching
- Technology sharing | test platform development - Vue router routing design for front-end development
- Return to the top - wepy applet - front end combing
- Install less / sass
- Node. JS basic tutorial
- Have you learned how to use Vue?
- The front end can't calm me down
- Technology sharing | learning to do test platform development vuetify framework
guess what you like
Vue starts with an error and prompts NPM install core- [email protected] // oryarn add core- [email protected]
STM32 + esp8266 + air202 basic control chapter - 201 - server reverse proxy - server installation nginx (. Windows system)
STM32 + esp8266 + air202 basic control chapter - 205 - server reverse proxy - Web server configuration HTTPS access (. Windows system)
Element after the spring frame assembly is opened, the scroll bar returns to the top
Java project: nursing home management system (java + springboot + thymeleaf + HTML + JS + MySQL)
Java project: drug management system (java + springboot + HTML + layui + bootstrap + seals + MySQL)
What are the similarities and differences between jQuery and native JS?
The starting price is less than 90000 yuan, and the National University's seven seat super value SUV xinjietu x70s is officially pre sold
Fastadmin modifies the list width (limit the list width, support CSS writing), and the width limit. It is too large or useless.
Learning ajax in Vue is enough
- Rasa dialogue robot serial 7 lesson 122: rasa dialogue robot debugging project practical bank financial dialogue robot whole life cycle debugging practice - (III)
- CSS foundation-15-drop-down menu
- Only one message prompt pops up in the element UI at a time
- Leetcode 82. Delete duplicate elements in the sorting linked list II
- This beast was blessed with skills to test drive the DHT version of Harvard beast
- Vue Click to switch the background color randomly (small demo)
- In the era of man-machine war, how did Beijing magic cube and artificial intelligence produce chemical reaction
- About nginx + Nacos using domain name connection invalid things
- How strong is the giant wave hybrid blessing when GAC motor shadow cool makes its global debut?
- Layui framework application FAQ
- Layui style optimization
- Post request (http-c4e7.post)
- Is low code a blessing or a challenge for programmers?
- Use the pointer of the array to test the relationship between the two-dimensional elements and the column of the array in the order of "% 1-6", and then use the pointer of the array to output the data in the order of "% 1-6", and then use the pointer of t
- 6-2 pointer and the sum fraction of each column of array matrix 10 this problem requires the implementation of a function to find the sum of each column of a two-dimensional array with n (less than 10) rows and 7 columns. The columns and are stored in a o
- 7-1 find the specified element in the array
- When using uniapp for e-commerce projects, vuex is used to realize the global sharing of data to make shopping cart pages
- JQuery Basics
- `JQuery ` advanced
- Do not leave the market unless necessary! Zhongshan City issued specific requirements for campus epidemic prevention after the May Day holiday
- Software design pattern -- Chapter 3 structural pattern -- sharing element pattern
- Vue uses the online form of Excel in the front end of lucky sheet to import, display and export Excel files
- Vue uses echart to draw national maps and overlay charts
- Vue + element UI: Vue user-defined instruction monitors the scrolling event of El table to scroll the scroll bar to the bottom and load new data
- Vue + element when there is no paging at the back end, the front end completes the paging of El table independently - scrolling to the bottom to load new data
- [react] react routing concept
- Lenovo z475 disassembly and repair - plate No. kl6c
- Random array into an array, requiring that the elements cannot be repeated
- The belated Toyota bz4x, even with the blessing of e-tnga architecture, is still not worth starting
- In element plus, for example, how to change the checkbox status in the list by clicking on the header and selecting all
- Help, after changing the user name, the computer is useless and can't log in
- Drag the left column of Vue and keep the right width unchanged; The scroll bar appears
- HTML notes
- In depth analysis of headless single linked list -- dynamic diagram demonstration of C language
- Share 9 development skills related to vue3
- CSS box centered
- Used in Vue projects Sync modifier and $emit (update: XXX)
- Vue class & Style binding and computed
- Vue project uses this$ forceUpdate()； Force render page