Vue filter 過濾器、以及在table中的使用介紹
使用方法:
// 雙花括號(hào)中 {{ isActive | isActiveFitlter}} // 在v-bind 中 <div v-bind:id=" isActive | isActiveFitlter"></div>
一、組件中定義本地 Filter
filters:{ isActiveFitlter : (value)=>{ return value===1?'激活':'凍結(jié)' } }
二、創(chuàng)建Vue實(shí)例前定義全局過濾器
Vue.filter('isActiveFitlter', (value)=>{ return value === 1?'激活':'凍結(jié)' }) new Vue({ // ... })
三、全局 Filter
1、自定義一個(gè)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ǔ)充知識(shí):vue 過濾數(shù)組數(shù)據(jù),用于控制 el-table 某一行是否顯示
場(chǎng)景:第一次查出來(lái)的數(shù)據(jù)用list接收。然后我第二次要用到list里面的數(shù)據(jù),但是我想過濾掉選中的某一條用戶的信息,這個(gè)時(shí)候就使用 filter 函數(shù)對(duì)list 進(jìn)行 過濾。很簡(jiǎn)單,做個(gè)筆記。
<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中的使用介紹就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+node+socket io實(shí)現(xiàn)多人互動(dòng)并發(fā)布上線全流程
這篇文章主要介紹了vue+node+socket io實(shí)現(xiàn)多人互動(dòng)并發(fā)布上線全流程,本文給大家提到了socket.io相關(guān)用法概覽及開發(fā)流程,需要的朋友可以參考下2021-09-09Vue中進(jìn)行分布式鑒權(quán)與認(rèn)證的過程
在Vue應(yīng)用中,我們通常需要實(shí)現(xiàn)分布式鑒權(quán)和認(rèn)證,以確保用戶的安全性和數(shù)據(jù)的保密性,本文將介紹在Vue中如何進(jìn)行分布式鑒權(quán)與認(rèn)證,需要的朋友可以參考下2023-06-06vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例
今天小編就為大家分享一篇vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09淺談vue在html中出現(xiàn){{}}的原因及解決方式
這篇文章主要介紹了淺談vue在html中出現(xiàn){{}}的原因及解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-11-11element自定義 多文件上傳 觸發(fā)多次on-change問題
這篇文章主要介紹了element自定義 多文件上傳 觸發(fā)多次on-change問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)
這篇文章主要介紹了vant?Cascader級(jí)聯(lián)選擇實(shí)現(xiàn)可以選擇任意一層級(jí)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07