Vue filter 過濾器、以及在table中的使用介紹
使用方法:
// 雙花括號中
{{ isActive | isActiveFitlter}}
// 在v-bind 中
<div v-bind:id=" isActive | isActiveFitlter"></div>
一、組件中定義本地 Filter
filters:{
isActiveFitlter : (value)=>{
return value===1?'激活':'凍結'
}
}
二、創(chuàng)建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="狀態(tài)">
<template slot-scope="scope">
{{scope.row.isActive | isActiveFitlter}}
</template>
</el-table-column>
補充知識:vue 過濾數組數據,用于控制 el-table 某一行是否顯示
場景:第一次查出來的數據用list接收。然后我第二次要用到list里面的數據,但是我想過濾掉選中的某一條用戶的信息,這個時候就使用 filter 函數對list 進行 過濾。很簡單,做個筆記。
<el-dialog title="克隆規(guī)則" :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 filter 過濾器、以及在table中的使用介紹就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程
這篇文章主要介紹了vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程,本文給大家提到了socket.io相關用法概覽及開發(fā)流程,需要的朋友可以參考下2021-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

