Vue filter 過(guò)濾器、以及在table中的使用介紹

更新時(shí)間：2020年09月07日 15:24:56 作者：bobobocai

這篇文章主要介紹了Vue filter 過(guò)濾器、以及在table中的使用介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

使用方法：

// 雙花括號(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í)例前定義全局過(guò)濾器

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 過(guò)濾數(shù)組數(shù)據(jù)，用于控制 el-table 某一行是否顯示

場(chǎng)景：第一次查出來(lái)的數(shù)據(jù)用list接收。然后我第二次要用到list里面的數(shù)據(jù)，但是我想過(guò)濾掉選中的某一條用戶的信息，這個(gè)時(shí)候就使用 filter 函數(shù)對(duì)list 進(jìn)行過(guò)濾。很簡(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="沒(méi)有數(shù)據(jù)了哦"
    border
    fit
    stripe
    :row-key="getRowKey"
    @selection-change="handleSelectionChange"
>

//過(guò)濾數(shù)據(jù)代碼
showCloneRuleslView(user_id) {
    this.SourceUserId = parseInt(user_id)
    //filter過(guò)濾函數(shù)使用
    this.list2 = this.list.filter((data) => {
    //過(guò)濾掉SourceUserId這條數(shù)據(jù)
     return data.user_id !== this.SourceUserId
    })
    this.cloneDialogVisible = true
    console.log(this.SourceUserId)
  },

以上這篇Vue filter 過(guò)濾器、以及在table中的使用介紹就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue部署包可配置后臺(tái)接口地址的方法
這篇文章主要介紹了vue部署包可配置后臺(tái)接口地址的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-03-03
Vue混淆與還原的實(shí)現(xiàn)
混淆是一種有效的保護(hù)措施,可以加密和壓縮代碼,使其難以被理解和修改,本文將介紹Vue混淆的概念以及如何進(jìn)行還原,感興趣的可以了解一下
2023-12-12
關(guān)于vue中@click.native.prevent的說(shuō)明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue預(yù)渲染：prerender-spa-plugin生成靜態(tài)HTML與vue-meta-info更新meta
Vue.js中,prerender-spa-plugin和vue-meta-info插件的結(jié)合使用,提供了解決SEO問(wèn)題的方案,prerender-spa-plugin通過(guò)預(yù)渲染技術(shù)生成靜態(tài)HTML,而vue-meta-info則能動(dòng)態(tài)管理頁(yè)面元數(shù)據(jù),本文將探討如何使用這兩個(gè)工具優(yōu)化Vue.js項(xiàng)目的SEO表現(xiàn),包括安裝、配置及注意事項(xiàng)
2024-10-10
vue使用axios訪問(wèn)本地json文件404問(wèn)題及解決
這篇文章主要介紹了vue使用axios訪問(wèn)本地json文件404問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
elementui 開(kāi)始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui 開(kāi)始結(jié)束時(shí)間可以選擇同一天不同時(shí)間段的實(shí)現(xiàn)代碼,需要先在main.js中導(dǎo)入相應(yīng)代碼,代碼簡(jiǎn)單易懂,需要的朋友可以參考下
2024-02-02
Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案
今天很郁悶，遇到這樣一個(gè)奇葩問(wèn)題，使用webpack打包vue后，將打包好的文件，發(fā)布到Tomcat上，訪問(wèn)成功，但是刷新后頁(yè)面報(bào)404錯(cuò)誤，折騰半天才解決好，下面小編把Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案分享給大家，需要的朋友一起看看吧
2018-05-05
詳解VUE單頁(yè)應(yīng)用骨架屏方案
這篇文章主要介紹了詳解VUE單頁(yè)應(yīng)用骨架屏方案，詳細(xì)的介紹了什么是骨架屏以及是憲法方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
解決vue-element-admin安裝依賴npm install報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了解決vue-element-admin安裝依賴npm install報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
詳解Vue開(kāi)發(fā)微信H5微信分享簽名失敗問(wèn)題解決方案
這篇文章主要介紹了詳解Vue開(kāi)發(fā)微信H5微信分享簽名失敗問(wèn)題解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08