Vue过滤器实现根据分类id显示分类名称

在开发中遇到的问题

获取的信息展示列表，但是获取的对应的信息中有对应的分类信息的显示，手中只有每个条目的分类id，展示想要展示分类名称，可以用过滤器实现

Vue.filter('showCateName',function(cat_id,cates){
  const catObj = cates.filter(item => item.cat_id==cat_id)
  if(catObj.length!=0){
    return catObj[0].cat_name
  }else{
    for(var cat of cates){
      if(cat.children.length!=0){
        const ret = cat.children.find(item=>item.cat_id==cat_id)
        if(ret){
          return ret.cat_name
        }
      }
    }
  }
})

思路

1. 通过请求获取所有的一级分类及二级分类
2. 功过find或者filter函数查找分类，并将分类名称返回即可

数据类似这种结构，上面的处理方法是针对下面的数据适用

 {
            "cat_id": 1,
            "cat_name": "大家电",
            "cat_pid": 0,
            "cat_level": 0,
            "cat_deleted": false,
            "children": [
                {
                    "cat_id": 3,
                    "cat_name": "电视",
                    "cat_pid": 1,
                    "cat_level": 1,
                    "cat_deleted": false,
                    "children": [
                        {
                            "cat_id": 6,
                            "cat_name": "曲面电视",
                            "cat_pid": 3,
                            "cat_level": 2,
                            "cat_deleted": false
                        },
                        {
                            "cat_id": 7,
                            "cat_name": "海信",
                            "cat_pid": 3,
                            "cat_level": 2,
                            "cat_deleted": false
                        }
                    ]
                }
            ]
        }