Vue uses the el-table back-end filtering function in elementui to explain

Vue uses the el-table back-end filtering function in elementui to explain

Problem Description

For the background management system, the more common function is to add, delete, modify and check. For "check", it is more common to filter data to view. Hungry? The ui comes with a filtering function. However, the example given in the official document is "front-end filtering", which means that hard-coded data is filtered out by the front-end for presentation. The official renderings are as follows:

However, in actual development, the data is dynamically retrieved from the database by back-end colleagues and returned to the front-end, so the official case "front-end filtering" is not used much, but you can still look at it. This article mainly talks about "back-end filtering" "How to use

I can t help but complain about the "ungroundedness" written in the official document.

Back-end screening steps

Step 1: build a table

<template> <div id="app"> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="name" label=" " width="180" ></el-table-column> <el-table-column prop="age" label=" " width="180"> </el-table-column> <el-table-column prop="gender" label=" " width="180"> </el-table-column> <el-table-column prop = "xueli" label = "Education" width = "180" > </el-table-column > < el-table-column prop = "like" label=" " width="180"> </el-table-column> <el-table-column prop="address" label=" "> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name : " " , age : 18 , gender : "Male" , xueli : "Undergraduate" , like : "Basketball" , address : "Shanghai Minhang" , }, //Omit some table data... ], }; }, }; </script > copy code

The preliminary renderings are as follows:

Step 2: Turn on the filter function for a column to be filtered

Turning on the filter is actually very simple, just add the filters attribute to the corresponding column to turn on the filter of the column. Filters is an array. In each item of the array, there are two attributes, text and value, which are the presented data and the corresponding identifier. Here we first use the name as an example to filter

The filtering of other table fields with multiple conditions will be added later

Add filters array writing method 1: write directly in the label (not recommended)

If the filters array is written directly in the label, it is hard to write, and it is not dynamic. This method is not recommended. Because in the development situation, the value of the filter array is also the data obtained from the background. Of course, if it is similar to filtering gender, male or female; filtering kindergarten classes, small classes, middle classes, and large classes. It is also possible for such fixed screening data to be written in the label. However, in most cases, it is written in the method. It is convenient to get data from the background by writing in the method.

<el-table-column prop= "name" label= "name" width= "180" column-key= "filterTag" :filters= "[ {text:' ', value:' ' }, {text:'Zhang Xiaohua', value:'Zhang Xiaohua' }, {text:'Zhao Xiaoer', value:'Zhao Xiaoer' }, {text:' ', value:' ' }, ]" ></el-table-column> Copy code

Add filters array writing method 2: write the array in methods (recommended)

//html part <el-table-column prop= "name" label= "name" width= "180" :filters= "getfilterNameItem()" ></el-table-column> //js part getfilterNameItem () { let apiArr = [ //Get the filtered fields from the backend { text : " " , value : " " }, { text : "Zhang Xiaohua" , value : "Zhang Xiaohua" }, { text : "Zhao Xiaoer" , value : "Zhao Xiaoer" }, { text : "Money Daniel" , value : "Money Daniel" }, ]; return apiArr; //return to go back } Copy code

After we enable the filter function for a certain column, a small drop-down arrow will automatically appear in the header of that column, and the corresponding filter item will appear when you click it. Check the filter or reset, as shown in the following figure:

Step 3: Add the filter-change monitoring method

Click here to filter or reset, nothing happens, because it is not enough, we also need to add a method filter-change, the official introduction of this method is as follows:

The filter-change method can monitor the changes of the filter items, and it will be triggered when the user clicks the filter or reset the small button. Let's add it later and see if there are any changes (add it to the el-table tag):

//html part <el-table :data= "tableData" border style= "width: 100%" @filter-change= "filterChange" > </el-table> //js part filterChange ( filterObj ) { console .log(filterObj); } Copy code

Click to filter or print when reset to see what happens

Use the column-key provided by the official document to modify it

<!-- column-key= "filterTag" should be configured, which is equivalent to an alias, and the changed object can be accessed through this alias --> < el-table-column prop = "name" label = "name " width = "180" column-key = "filterTag" :filters = "getfilterNameItem()" > </el-table-column > Copy code

It ended up like this:

Step 4: Perform corresponding processing in the callback function of filter-change

Click to filter

Click reset

In this case, you can send a request with the filter parameters or reset it...

Supplement multi-condition screening

If the table wants to filter by multiple conditions, it is actually very simple, such as adding another to filter gender. Just add a column-key and filters to the gender column (the value of column-key in each column cannot be the same), and judge it in the filter-change callback. Personally, I feel that if there are multiple conditions to filter, it will not be elegant to write this way.

<el-table-column prop= "gender" label= "gender" column-key= "filterSex" :filters= "[ {text:'Male', value:'Male' }, {text:' ', value:' ' }, ]" width= "180" > Copy code

If it is a multi-condition filter, it is recommended to write the filter items outside instead of in the table. For the corresponding steps, please refer to my other blog: vue imitates the filtering function of teambition (using Ele.me UI) Ele.me juejin.cn/post/693395...

Finally, attach the complete code in the case:

<template> < div id = "app" > < el-table :data = "tableData" border style = "width: 100%" @ filter-change = "filterChange" > < el-table-column prop = "name" label = "Name" width = "180" column-key = "filterTag" :filters = "getfilterNameItem()" > </el-table-column > <!- column-key="filterTag" This should be configured, which is equivalent to an alias, and the changed object can be accessed through this alias --> < el-table-column prop = "age" label = "age " width = "180" > </el-table-column > < el-table-column prop = "gender" label = "gender" width = "180" > </el-table-column > < el-table- column prop = "xueli" label = "Education" width = "180" > </ el-table-column> <el-table-column prop = "like" label = "hobby" width = "180" > </el-table-column > < el-table-column prop = "address" label = "address" > </el -table-column > </el-table > </div > </template> < script > export default { data ( ) { return { tableData : [], }; }, mounted () { //Send a request to get the data of the table this .getTableData(); }, methods : { //Get table data getTableData () { let apiTableData = [ { name : " " , age : 18 , gender : "Male" , xueli : "Undergraduate" , like : "Basketball" , address : "Shanghai Minhang" , }, { name : "Zhang Xiaohua" , age : 28 , gender : " " , xueli : "Undergraduate" , like : " Drawing " , address : "Shanghai Songjiang" , }, { name : "Zhao Xiaoer " , age : 28 , gender : "Male" , xueli : "Graduate" , like : "Aerospace" , address : "Shanghai Putuo" , }, { name: " ", age: 28, gender: " ", xueli: " ", like: " ", address: " ", }, ]; this.tableData = apiTableData; }, // getfilterNameItem() { let apiArr = [ // { text: " ", value: " " }, { text: " ", value: " " }, { text: " ", value: " " }, { text: " ", value: " " }, ]; return apiArr; }, // filterChange(filterObj) { console.log(filterObj.filterTag); if (filterObj.filterTag.length > 0) { console.log(" "); } else { console.log(" "); } }, }, }; </script> <style lang="less" scoped> #app { width: 100%; height: 100vh; box-sizing: border-box; padding: 20px 0 0 20px; } </style>