Vue-cli项目中过滤器使用

场景：在页面显示的内容，并非我们存入的字段内容，需要进行规律的转换。

filter 官方文档：https://cn.vuejs.org/v2/guide/filters.html

在element-ui组件中，使用表格中的字段显示对应内容，需要使用到的过滤器功能。

<el-table-column prop="dev_status" label="所属端" width="180"> //如表格中需要用到所属端的字段，字段在数据库中存储是1，2，代表andrid 和ios，在显示中需要显示能看的懂的内容。
    <template slot-scope="scope">  //需要使用template 来实现我要操作的内容   slot-scope 插槽  scope是我当前所选择的对象，在写过滤器时，方法中传入的参数就是这里传到过去的
        <span>{{scope.row.dev_status | devType}}</span>   // 在vue使用过滤器的方式，是在需要使用的内容后，通过管道符号 ｜ 过滤器的名称来实现的
    </template>
</el-table-column>

在export default 上面，创建个变量

const devices=[
  {type:1,name:"Android"},
  {type:2,name:"IOS"}
]

创建filter方法，需要在filters中写方法，代表这是一个过滤器

filters:{ //过滤器

　　devType(res){ // 传入当前操作的行对象

　　　　const d = devices.find(obj=> obj.type == res)  find方法遍历创建的字典，找到对应type，然后返回给过滤器使用

　　　　return d?d.name:null

　　}

}