vue里过滤器和find方法，字典接口的结合使用

以前在写渲染页面的时候，如果表格里需要对一个数据就可以用插槽和过滤器一起用，也可以用三元运算符。但是如果数据需要判断的特别多，而且后期还有可能更改的话，那过滤器里的东西就不能写死了。这个时候，后台给了一个字段的接口，可以通过这个接口查询需要用到的各个页面的数据，然后放到一个数组里，结合过滤器一起用。

1 先定一个空数组

arr:[]

2 通过字典的接口获取到数据，并且放到数组里

        //获取字典
         getInfo(){
            axios
            .get('/api/Plate/Plate_PlateInfos/GetPlateEntities')
            .then(res=>{
                if(res.ResultType==0){
                    res.Data.forEach(element => {
                        if(element.TableName=="Doors" && element.CellName=="LedType"){
                           _this.arr.push(element)
                        }
                    });
                }
            })
            .catch(error=>{
                console.log(error)
            })
         }

 上面那个getInfo()为一个方法，需要在mounted里面调用

3 在过滤器里用find方法，返回需要的数据

filters:{
         //显示屏类型
         LedTypeFilter:function(value){
            if(_this.arr.find(item=>item.Key==value) != undefined){
                return _this.arr.find(item=>item.Key==value).Val
            }else{
                return '其他'
            }
         }
}

if后面的else根据情况添加，如果有其他情况就添加，一般是不需要添加的。

4 过滤器渲染在页面上

这样我们就可以把过滤器里的东西写成活的了。find方法很好用。