[JavaScript知识库]Vue.js全局API——filter

情景

将后台存的数字订单状态格式化显示在前端

使用filter

1. 新建filters文件
   

2. order.js 写处理订单的filter方法

export default {
  setOrderStatus (status) {
    switch (status) {
      case 1:
        return '待付款'
        
      case 2:
        return '待发货'
        
      case 3:
        return '待收货'
        
      case 4:
        return '待评价'
        
      default:
        return '未获取到状态'   
    }
  },
  setStatusStyle (status) {
    if (status === '未获取到状态') {
      return 'red'
  }
  }
}

3. index.js 将filter导出

import orders from './orders'
export default {
 ...orders
}

4. 在main.js中全局注册使用

import filters from '@/plugins/filters'

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

6. 页面中使用

  <div>
    过滤器使用
    {{ 1 | setOrderStatus}}
     <a-table style="width:100%" :columns="columns" :data-source="tableData" bordered>
      <div slot="status" slot-scope="text" :class="text | setOrderStatus | setStatusStyle">
        {{text | setOrderStatus}}
      </div>
     </a-table>
  </div>
</template>

<script>
import tableData from './table'
// import filterList from '@/filters';
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '订单',
    dataIndex: 'order',
    key: 'order',
    scopedSlots: { customRender: 'order' }
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
    scopedSlots: { customRender: 'price' }
  },
  {
    title: '状态',
    key: 'status',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '占比',
    dataIndex: 'rote',
    key: 'rote',
    scopedSlots: { customRender: 'rote' }
  },
];
export default {
  name: 'FilterPage',

  data() {
    return {
      columns,
      tableData
    }
  },
  // filters: {
  //  ...filterList
  // },
  mounted() {
    // console.log('filters', filterList)
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.red {
  color: red
}
</style>

• table.js

export default [
  {
    name: '商品1',
    order: '546645',
    price: 1111,
    status: 1,
    rote: 0.5
  },
  {
    name: '商品1',
    order: '546456',
    price: 4545,
    status: 2,
    rote: 0.6
  },
  {
    name: '商品1',
    order: '4564645',
    price: 1111,
    status: 3,
    rote: 0.3
  },
  {
    name: '商品1',
    order: '6456456',
    price: 1222,
    status: 4,
    rote: 0.2
  },
  {
    name: '商品1',
    order: '45646564',
    price: 4545,
    status: null,
    rote: 0.8
  },
]

效果

总结

功能

主要用于格式化文本

使用

注册方式

• 在组件的选项中定义
• 在创建Vue.js实例之前全局定义（以上Demo）

使用方式

• 用于双括号插值和v-bind表达式（2.1.0+开始），应该被添加在js表达式的尾部，由管道符号指示
• 可以串联并且接受参数

{{mes | filter(agrs1, agrs2)}}
// mes 会作为第一个参数，agrs1作为第二个，agrs作为第三个 

原理《深入浅出Vue.js》

filters是个对象，自定义的过滤器以名称和函数为键值存于filters

• 在编译阶段将过滤器编译成函数调用，串联的过滤器编译后是一个嵌套的函数调用，前一个过滤器的执行结果是最后一个过滤器函数的参数
• 编译后的_f函数是resolveFilter函数的别名，resolveFilter函数的作用是找到对应的过滤器并返回
• 编译过滤器的过程分两歩：解析和resolveFilter

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系