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

最新推荐文章于 2024-07-01 09:50:00 发布

水蜜桃那么甜

最新推荐文章于 2024-07-01 09:50:00 发布

阅读量2.1k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Lemontree_fu/article/details/102818419

版权

本文介绍了如何在Vue项目中，结合字典接口、过滤器和find方法处理数据。首先定义一个空数组，然后通过字典接口获取数据并填充到数组。接着在过滤器内部使用find方法查找所需数据，动态处理复杂判断。最后将过滤后的数据渲染到页面上，提高代码的灵活性。

摘要由CSDN通过智能技术生成

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

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)
            })
         }