微客导航 » 文章资讯 » Vue filter 过滤器、以及在table中的使用介绍

Vue filter 过滤器、以及在table中的使用介绍

2023-07-17 02:23:04 357

使用方法：

//双花括号中
{{isActive|isActiveFitlter}}

//在v-bind中

一、组件中定义本地Filter

filters:{
isActiveFitlter:(value)=>{
returnvalue===1?'激活':'冻结'
}
}

二、创建Vue实例前定义全局过滤器

Vue.filter('isActiveFitlter',(value)=>{
returnvalue===1?'激活':'冻结'
})
newVue({
//...
})

三、全局Filter

1、自定义一个js文件，可以放在common文件夹中

//filters.js
letisActiveFitlter=value=>{
returnvalue===1?'激活':'冻结'
}
export{isActiveFitlter}

2、main.js引入filters.js

import*asfiltersfrom'./assets/common/filters'
Object.keys(filters).forEach(key=>{
Vue.filter(key,filters[key])
})

3、组件中使用

{{isActive|isActiveFitlter}}

注意：

在table中使用需要借助插槽



{{scope.row.isActive|isActiveFitlter}}

补充知识：vue过滤数组数据，用于控制el-table某一行是否显示

场景：第一次查出来的数据用list接收。然后我第二次要用到list里面的数据，但是我想过滤掉选中的某一条用户的信息，这个时候就使用filter函数对list进行过滤。很简单，做个笔记。

//过滤数据代码
showCloneRuleslView(user_id){
this.SourceUserId=parseInt(user_id)
//filter过滤函数使用
this.list2=this.list.filter((data)=>{
//过滤掉SourceUserId这条数据
returndata.user_id!==this.SourceUserId
})
this.cloneDialogVisible=true
console.log(this.SourceUserId)
},

以上这篇Vuefilter过滤器、以及在table中的使用介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue filter 过滤器、以及在table中的使用介绍

热门推荐

随机推荐