vue中filter的應(yīng)用場(chǎng)景詳解
filter一般用于過(guò)濾某些值,比如我這個(gè)字段是空,可是我想在前端顯示“–”,就可以使用到它了。
最近碰到一個(gè)需求就是要給某些字段可以設(shè)置權(quán)限去以其他形式顯示,比如以“***”顯示需要隱藏的金額。
1.獲取金額權(quán)限
2.通過(guò)filter過(guò)濾滿(mǎn)足條件的字段
3.返回隱藏的樣式
看代碼:
//其他的看,看我標(biāo)注的就可以了
//scope.row 獲取當(dāng)前行
<template slot-scope="scope">
<template v-if="item.formType == 'label'">
<el-button
v-if="item.link!=undefined"
type="text" size="small" @click="handleColumnClick(item.link,scope.row)">
//filter一般不用的過(guò)濾用|
//showLabelValue就不寫(xiě)出來(lái)了
//方法一個(gè)參數(shù)對(duì)應(yīng)的filter是兩個(gè)參數(shù)
//第一個(gè)是前一列返回的值
//第N-1個(gè)是你想傳的值
{{ scope.row | showLabelValue(item) | canViewAmount(canViewAmount,xtType,item) }}
</el-button>
<template v-else>
{{ scope.row | showLabelValue(item) | canViewAmount(canViewAmount,xtType,item) }}
</template>
</template>
</template>
export default {
filters: {
//row就是scope.row返回的數(shù)據(jù)
showLabelValue(row,item){
return 'value'
}
//value值, canView權(quán)限, xtType哪個(gè)頁(yè)面, item列表數(shù)據(jù)
//如果showLabelValue返回的是value,對(duì)應(yīng)的canViewAmount參數(shù)的value就是‘value'
canViewAmount(value, canView, xtType, item) {
//滿(mǎn)足條件用“***”顯示(只是顯示),保存到數(shù)據(jù)庫(kù)還是原列表的內(nèi)容
if (!canView && xtType == 'salesOrder') {
if (item.field == 'priceNoTax' || item.field == 'amountNoTax' || item.field == 'price' || item.field == 'amount') {
return '***'
}
}
if (!canView && xtType == 'project') {
if (item.field == 'amount' || item.field == 'amountNoTax') {
return '***'
}
}
return value
}
},
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue雙向數(shù)據(jù)綁定知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定的原理以及知識(shí)點(diǎn)總結(jié),并做了代碼實(shí)例分析,有需要的朋友參考下。2018-04-04
Vue+Echarts實(shí)現(xiàn)繪制多設(shè)備狀態(tài)甘特圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合Echarts實(shí)現(xiàn)繪制多設(shè)備狀態(tài)甘特圖,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue3 style CSS 變量注入的實(shí)現(xiàn)
本文主要介紹了Vue3 style CSS 變量注入的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
TSX常見(jiàn)簡(jiǎn)單入門(mén)用法之Vue3+Vite
Vue3的確可以直接使用tsx開(kāi)發(fā),唯一需要處理的就是children,而且處理起來(lái)還是比較不爽的,下面這篇文章主要給大家介紹了關(guān)于TSX常見(jiàn)簡(jiǎn)單入門(mén)用法之Vue3+Vite的相關(guān)資料,需要的朋友可以參考下2022-08-08
Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
@click.native和@click的區(qū)別及說(shuō)明
這篇文章主要介紹了@click.native和@click的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue?頁(yè)面卡死,點(diǎn)擊無(wú)反應(yīng)的問(wèn)題及解決
這篇文章主要介紹了vue?頁(yè)面卡死,點(diǎn)擊無(wú)反應(yīng)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10

