What is the application scenario of filter in vue
What this article shares to you is about the application scenario of filter in vue. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.
Filter is generally used to filter certain values, such as my field is empty, but I want to display "-" at the front end, so I can use it.
Recently, there is a need to give permissions to certain fields to display in other forms, such as "*" to show the amount to be hidden.
1. Get permission for amount
two。 Filter fields that meet the criteria through filter
3. Return to hidden styles
Look at the code:
/ / other look Just look at what I marked / / scope.row to get the current line / / filter generally not used for filtering | / / showLabelValue is not written out / / method A parameter corresponding to the filter is two parameters / / the first is the value returned by the previous column / / N-1 is the value you want to pass {{scope.row | showLabelValue (item) | canViewAmount (canViewAmount) XtType,item)} {{scope.row | showLabelValue (item) | canViewAmount (canViewAmount,xtType,item)}} export default {filters: {/ / row is the data returned by scope.row showLabelValue (row,item) {return 'value'} / value, canView permission, xtType which page, item list data / / if showLabelValue returns value The value of the corresponding canViewAmount parameter is' value' canViewAmount (value, canView, xtType, item) {/ / display with "*" when the condition is met (just display) If (! canView & & xtType = = 'salesOrder') {if (item.field = =' priceNoTax' | | item.field = = 'amountNoTax' | | item.field = =' price' | | item.field = = 'amount') {return' * *'} if (! canView & & xtType = 'project') {if (item.field = =' amount) '| | item.field = =' amountNoTax') {return'* *}} return value}} This is what the application scenario of filter in vue looks like. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.
