Business need to filter data in the table functions, implement a drop-down box requirement in the header to filter, first of all, the Element - UI official document information, in column set filters filter method attribute can open the column filter, filters is an array, the filter method is a method, which is used to determine whether some of the data shows that will be introduced to three parameters: the value of the row and column, but the filter method is the method of data filtering, but only support existing data filtering, ordering does not support the background, through reading the official document, we can use the filter - change event, the filter - change will return a parameter, the key: the column columnKey, can use the Object. The keys () to obtain the key value, then the judgment is that a list of the filtering operation (used when multiple columns screening), value: is the condition for screening,
Now I must carry on the multiple columns screening, and then pass filter the results to the back-end, back-end return to filter data, currently only do single screening, multiple columns screening will prompt a column undefined,

 & lt; El - table - column 
Label="mold type" 
Prop="prOtCodeEM" 
Min - width="100" 
The column - key="prOtCodeEM 
": filters="[{value: text: 'mold', 'mold'}, {value: text: 'tools',' governance tools'}, {value: text: 'die', 'die'}]" 
The show - overflow - tooltip 
  
Label="process status" 
Prop="docIsOKEM" 
Min - width="105" 
The column - key="docIsOKEM 
": filters="[{text: 'has been completed, the value:' completed '}, {value: text: 'unfinished', 'unfinished'}]" 
The show - overflow - tooltip 
  


HandleFilterChange (filters) {
Enclosing loading=true; 
This $axios 
.post ("/screen, "{
Time1: enclosing timeData [0], 
Time2: enclosing timeData [1], 
Code1: filters. PrOtCodeEM [0], 
Code2: filters. PrOtCodeEM [1], 
Code3: filters. PrOtCodeEM [2], 
Completed: filters. DocIsOKEM [0], 
Uncompleted: filters. DocIsOKEM [1] 
}) 
Then (reponse=& gt; {
Enclosing tablelist1=reponse. Data; 
this.loading=false; 
The console. The log (reponse); 
}) 
The catch (error=& gt; {
console.log(error); 
}); 
} 

CodePudding user response:

 
Data () {
Return {
FilterData: {} 
} 
}, 
Methods: {
HandleTable (filter) {
Let the key=Object. Keys (filter) [0] 
Enclosing filterData [key]=aa [key] 
The console. The log (enclosing filterData) 
}, 
} 

CodePudding user response:

Aa=& gt; filter