使用方法：使用方法：
// 双花括号中
{{ isActive | isActiveFitlter}}

// 在v-bind 中


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

// 在v-bind 中

一、组件中定义本地 Filter一、组件中定义本地 Filter
filters:{

isActiveFitlter : (value)=>{

return value===1?'激活':'冻结'

}
}
filters:{

isActiveFitlter : (value)=>{

return value===1?'激活':'冻结'

}
}二、创建Vue实例前定义全局过滤器二、创建Vue实例前定义全局过滤器
Vue.filter('isActiveFitlter', (value)=>{

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

return value === 1?'激活':'冻结'
})
new Vue({
// ...
})三、全局 Filter三、全局 Filter1、自定义一个js文件，可以放在common文件夹中
//filters.js
let isActiveFitlter = value => {

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

return value===1?'激活':'冻结'
}
export { isActiveFitlter }2、main.js 引入 filters.js
import * as filters from './assets/common/filters'
Object.keys(filters).forEach(key => {

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

Vue.filter(key, filters[key])
})3、组件中使用
{{ isActive | isActiveFitlter }}
{{ isActive | isActiveFitlter }} 注意：在table中使用需要借助 插槽







补充知识：vue 过滤数组数据，用于控制 el-table 某一行是否显示补充知识：补充知识：vue 过滤数组数据，用于控制 el-table 某一行是否显示场景：第一次查出来的数据用list接收。然后我第二次要用到list里面的数据，但是我想过滤掉选中的某一条用户的信息，这个时候就使用 filter 函数对list 进行 过滤。很简单，做个笔记。



v-loading="listLoading"

:data="list2" //绑定的是list2

element-loading-text="Loading"

empty-text="没有数据了哦"

border

fit

stripe

:row-key="getRowKey"

@selection-change="handleSelectionChange"
>



v-loading="listLoading"

:data="list2" //绑定的是list2

element-loading-text="Loading"

empty-text="没有数据了哦"

border

fit

stripe

:row-key="getRowKey"

@selection-change="handleSelectionChange"
>
//过滤数据代码
showCloneRuleslView(user_id) {

this.SourceUserId = parseInt(user_id)

//filter过滤函数使用

this.list2 = this.list.filter((data) => {

//过滤掉SourceUserId这条数据

return data.user_id !== this.SourceUserId

})

this.cloneDialogVisible = true

console.log(this.SourceUserId)

},
//过滤数据代码
showCloneRuleslView(user_id) {

this.SourceUserId = parseInt(user_id)

//filter过滤函数使用

this.list2 = this.list.filter((data) => {

//过滤掉SourceUserId这条数据

return data.user_id !== this.SourceUserId

})

this.cloneDialogVisible = true

console.log(this.SourceUserId)

},以上这篇Vue filter 过滤器、以及在table中的使用介绍就是小编分享给大家的全部内容了，希望能给大家一个参考。