溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了Vue如何在table中的使用 filter 過濾器，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
使用方法：
// 雙花括號中
{{ isActive | isActiveFitlter}}
// 在v-bind 中
<div v-bind:id=" isActive | isActiveFitlter"></div>一、組件中定義本地 Filter
filters:{
isActiveFitlter : (value)=>{
return value===1?'激活':'凍結'
}
}二、創建Vue實例前定義全局過濾器
Vue.filter('isActiveFitlter', (value)=>{
return value === 1?'激活':'凍結'
})
new Vue({
// ...
})三、全局 Filter
1、自定義一個js文件，可以放在common文件夾中
//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])
})3、組件中使用
<span> {{ isActive | isActiveFitlter }} </span>
注意：
在table中使用需要借助 插槽
<el-table-column prop="isActive" label="狀態">
<template slot-scope="scope">
{{scope.row.isActive | isActiveFitlter}}
</template>
</el-table-column>補充知識：vue 過濾數組數據，用于控制 el-table 某一行是否顯示
場景：第一次查出來的數據用list接收。然后我第二次要用到list里面的數據，但是我想過濾掉選中的某一條用戶的信息，這個時候就使用 filter 函數對list 進行 過濾。很簡單，做個筆記。
<el-dialog title="克隆規則" :visible.sync="cloneDialogVisible" width="600px">
<el-table
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)
},上述內容就是Vue如何在table中的使用 filter 過濾器，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
