Detailed Explanation of Application Scenario of filter in vue
- 2021-12-09 08:00:53
- OfStack
filter
1 is used to filter some values. For example, the field I am empty, but I want to display "-" in the front end, so I can use it.
A recent requirement was to give certain fields permissions to display in other forms, such as "***" to show the amount that needs to be hidden.
1. Get Amount Permission
2. Filter the fields that meet the criteria through filter
3. Return hidden styles
Look at the code:
// Look at the rest, just look at what I marked
//scope.row Get the current row
<template slot-scope="scope">
<template v-if="item.formType == 'label'">
<el-button
v-if="item.link!=undefined"
type="text" size="small" @click="handleColumnClick(item.link,scope.row)">
//filter1 Used for filtering, which is generally unused |
//showLabelValue I won't write it out
// Method 1 Parameter corresponding to filter Are two parameters
// No. 1 1 One is the former 1 The value returned by the column
// No. 1 N-1 One is the value you want to pass
{{ scope.row | showLabelValue(item) | canViewAmount(canViewAmount,xtType,item) }}
</el-button>
<template v-else>
{{ scope.row | showLabelValue(item) | canViewAmount(canViewAmount,xtType,item) }}
</template>
</template>
</template>
export default {
filters: {
//row Is scope.row Data returned
showLabelValue(row,item){
return 'value'
}
//value Value , canView Authority , xtType Which page , item List data
// If showLabelValue Returns the value , corresponding to canViewAmount Parameter value Is' value'
canViewAmount(value, canView, xtType, item) {
// Meet the conditions " *** "Show (just show), save to the database, or the contents of the original list
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
}
},
Summarize
This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!