Vue中使用filters传参过滤方法

在开发过程中遇到一个问题，后端接口中返回的数据中有一个类型，为100时显示XXX，200时显示XXX，用的Antd组件，在页面刚刷新的时候就得区分出来，所以用到filters来过滤一下；首先通过antd中a-table里面的scopedSlots属性，在页面中自定义一个插槽，然后通过filters来实现

内容部分

<template>
  <!-- 列表 -->
  <a-table :columns="columns">
    <template slot="orderNumber" slot-scope="text, record, index">
      {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
    </template>
    // 这里在filterType方法这里可以传参数默认第一个参数是text如果要传第二个第三个的话就在filterType(第二个，第三个...n)
    <span slot="companyType" slot-scope="text">{{ text | filterType }}</span> 
  </a-table>
</template>

逻辑

<script>
// 这里因为fi在Vue中filters里面是获取不到this指针的所以需要在这里定义一个that用来改变this指针
let that；
export default {
  data() {
    return {
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'orderNumber' },
        },
        {
          title: '企业类别',
          dataIndex: 'companyType',
          scopedSlots: { customRender: 'companyType' },
        },
      ],
      listUrl: {
        list: '', 
        companyType: '', 
      },
      companyTypeList: [],
    }
  },
  // 这里在creted页面数据加载完成之前使用beforeCreate生命周期里改变this指针，把this赋值给全局变量app
  beforeCreate() {
    app = this
  },
  filters: {
  // 这里为定义的过滤方法，因为上边没有传参数，所以第一个参数默认为text
    filterType(text) {
      // 这里定义一个name作为最后return出去的值
      let name = ''
      // 这里为循环过滤数据里边符合类型的值
      app.companyTypeList.forEach((item) => {
        if (item.key == text) {
        // 如果当前数据等于匹配的类型就让name等于所匹配的那个类型名称并return
          return (name = item.value)
        }
      })
      // 最后就是让text等于匹配成功的值
      return (text = name)
    },
  },
}
</script>

这就走完了过滤的过程

PS：这个仅限一级 if 判断，如果为多层 if 判断那么所有数据的值都会变为第一个符合条件的值

以上内容是本人自己试验以及搜集网上内容实现的，如有不足请指出