场景:在页面显示的内容,并非我们存入的字段内容,需要进行规律的转换。
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 } }