Detailed Explanation of Application Scenario of filter in vue

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!