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

 

上一篇:25.过滤模块


下一篇:Vue-过滤器filters