首页 > 其他 > 详细

Vue-cli项目中过滤器使用

时间:2021-01-20 13:14:40      阅读:35      评论:0      收藏:0      [点我收藏+]

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

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

 

Vue-cli项目中过滤器使用

原文:https://www.cnblogs.com/TestingShare/p/14302259.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!