使用配置实现不同数据调用不同过滤器处理格式

配置文件 中指定数据处理的过滤器

## FinanceConfig.js

import { formatColor, formatPrice, formatRatio, formatStockText, formatDate} from '@/utils/stockUtils'

let FinanceConfig = [
  {
    partName: '公司基本信息',
    fieldList:[
      {
        fieldName: '主营业务',
        field: 'majorBiz',
        value: ''        
      },      
      {
        fieldName: '财务更新时间',
        field: 'declareDate',
        value: '',
        dataFormat: formatDate
      },
      {
        fieldName: '主营业务收入',
        field: 'mainBizIncoMoney',
        value: '',
        colorFormat: formatColor,
        dataFormat: {
          func:  formatStockText,
          args: [2, '万']
        }
      },
      {
        fieldName: '每股净资产',
        field: 'napsMoney',
        value: '',
        colorFormat: formatColor,
        dataFormat: formatPrice
      }
    ]
  }
]
      
export {
  FinanceConfig
}

增加一个 dynamicFilter函数，此函数中判断使用哪个过滤器并返回值

## financePanel.vue

<template>
  <div class="panel__wrap">        
    <div class='part__wrap' v-for='item in FinanceConfig' :key='item.partName' >
      <h5 class='part__title' >{{item.partName}}</h5>
      <div class='part__field' v-for="fieldItem in item.fieldList" :key='fieldItem.fieldName'>
        <span class='part__field__name'>{{fieldItem.fieldName}}</span>
        <span class='part__field__txt' :class='fieldItem.value | dynamicFilter(fieldItem.colorFormat)'>{{fieldItem.value | dynamicFilter(fieldItem.dataFormat)}}</span>        
      </div>
    </div>
  </div>
</template>

<script>
import { FinanceConfig } from '@/components/FinanceConfig.js'
export default {
  data() {
    return {
      FinanceConfig: FinanceConfig
    }
  },  
  filters:{
     // 使用配置中指定的过滤器来处理
    dynamicFilter(val, format){ // 参考链接：https://bbs.csdn.net/topics/393545307      
      // 如果format是函数，直接让它处理
      if(typeof format === 'function'){
        return format(val)
      }
      
      /**
       * dataFormat:{
       *  func: formatRatio,
       *  args: [2, false]
       * }       
       */
      // 如果format是对象，使用fomrat.func处理，过滤器中可传入其他参数
      if(typeof format === 'object' && format.func){        
        if(format.args && format.args instanceof Array){
          return format.func(val, ...format.args) // 过滤器设置其他参数
        }
        return format.func(val)                
      }

      return val || '--'
    }    
  },
}
</script>