Vue filter 過濾器、以及在table中的使用介紹
更新時間：2020年09月07日 15:24:56 作者：bobobocai
這篇文章主要介紹了Vue filter 過濾器、以及在table中的使用介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
使用方法：
// 雙花括號中
{{ isActive | isActiveFitlter}}
// 在v-bind 中
<div v-bind:id=" isActive | isActiveFitlter"></div>
一、組件中定義本地 Filter
filters:{
isActiveFitlter : (value)=>{
return value===1?'激活':'凍結(jié)'
}
}
二、創(chuàng)建Vue實例前定義全局過濾器
Vue.filter('isActiveFitlter', (value)=>{
return value === 1?'激活':'凍結(jié)'
})
new Vue({
// ...
})
三、全局 Filter
1、自定義一個js文件，可以放在common文件夾中
//filters.js
let isActiveFitlter = value => {
return value===1?'激活':'凍結(jié)'
}
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="狀態(tài)">
<template slot-scope="scope">
{{scope.row.isActive | isActiveFitlter}}
</template>
</el-table-column>
補(bǔ)充知識：vue 過濾數(shù)組數(shù)據(jù)，用于控制 el-table 某一行是否顯示
場景：第一次查出來的數(shù)據(jù)用list接收。然后我第二次要用到list里面的數(shù)據(jù)，但是我想過濾掉選中的某一條用戶的信息，這個時候就使用 filter 函數(shù)對list 進(jìn)行 過濾。很簡單，做個筆記。
<el-dialog title="克隆規(guī)則" :visible.sync="cloneDialogVisible" width="600px">
<el-table
v-loading="listLoading"
:data="list2" //綁定的是list2
element-loading-text="Loading"
empty-text="沒有數(shù)據(jù)了哦"
border
fit
stripe
:row-key="getRowKey"
@selection-change="handleSelectionChange"
>
//過濾數(shù)據(jù)代碼
showCloneRuleslView(user_id) {
this.SourceUserId = parseInt(user_id)
//filter過濾函數(shù)使用
this.list2 = this.list.filter((data) => {
//過濾掉SourceUserId這條數(shù)據(jù)
return data.user_id !== this.SourceUserId
})
this.cloneDialogVisible = true
console.log(this.SourceUserId)
},
以上這篇Vue filter 過濾器、以及在table中的使用介紹就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程
這篇文章主要介紹了vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程,本文給大家提到了socket.io相關(guān)用法概覽及開發(fā)流程，需要的朋友可以參考下2021-09-09
這篇文章我們從 ast 生成時調(diào)用的 baseParse 函數(shù)分析，再到 baseParse 返回 createRoot 的調(diào)用結(jié)果，一直到細(xì)化的講解了 parseChildren 解析子節(jié)點函數(shù)中的其中某一個具體解析器的執(zhí)行過程。最后通過一個簡單模板舉例,需要的朋友可以參考下2021-09-09
Vue中進(jìn)行分布式鑒權(quán)與認(rèn)證的過程
在Vue應(yīng)用中，我們通常需要實現(xiàn)分布式鑒權(quán)和認(rèn)證，以確保用戶的安全性和數(shù)據(jù)的保密性，本文將介紹在Vue中如何進(jìn)行分布式鑒權(quán)與認(rèn)證,需要的朋友可以參考下2023-06-06
今天小編就為大家分享一篇vue給對象動態(tài)添加屬性和值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)聊天界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了JS框架之vue.js component組件的相關(guān)資料,本文通過實例詳解的方式給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
淺談vue在html中出現(xiàn){{}}的原因及解決方式
這篇文章主要介紹了淺談vue在html中出現(xiàn){{}}的原因及解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
element自定義 多文件上傳 觸發(fā)多次on-change問題
這篇文章主要介紹了element自定義 多文件上傳 觸發(fā)多次on-change問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vant?Cascader級聯(lián)選擇實現(xiàn)可以選擇任意一層級
這篇文章主要介紹了vant?Cascader級聯(lián)選擇實現(xiàn)可以選擇任意一層級方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了Vue2 SSR 緩存 Api 數(shù)據(jù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11