Detailed explanation of application scenarios of filters in Vue

//For the rest, just look at what I marked. //scope.row gets 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)">
                //filter is not generally used for filtering|
                //showLabelValue is not written out //The filter corresponding to one parameter of the method has two parameters //The first one is the value returned by the previous column //The N-1th 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 the data returned by scope.rowshowLabelValue(row,item){
 return 'value'
 }
 //value, canView permission, xtType which page, item list data //If showLabelValue returns value, the corresponding canViewAmount parameter value is 'value'
    canViewAmount(value, canView, xtType, item) {
    //If the conditions are met, "***" will be displayed (just display), and the content saved to the database is still 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
    }
  },