vueにおけるfilterの適用シーンについて解説します。

//For the rest of the look, just look at what I marked up
//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)">
                //filter generally not used for filtering with|
                //showLabelValue will not be written out
                // method a parameter corresponding to the filter is two parameters
                //The first is the value returned by the previous column
                //The N-1st 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.row
 showLabelValue(row,item){
 return 'value'
 }
 //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) {
    // meet the conditions with "***" display (just display), save to the database or the original list content
      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
    }
  },