vue中filter的應(yīng)用場景詳解
filter
一般用于過濾某些值,比如我這個字段是空,可是我想在前端顯示“–”,就可以使用到它了。
最近碰到一個需求就是要給某些字段可以設(shè)置權(quán)限去以其他形式顯示,比如以“***”顯示需要隱藏的金額。
1.獲取金額權(quán)限
2.通過filter過濾滿足條件的字段
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一般不用的過濾用| //showLabelValue就不寫出來了 //方法一個參數(shù)對應(yīng)的filter是兩個參數(shù) //第一個是前一列返回的值 //第N-1個是你想傳的值 {{ 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哪個頁面, item列表數(shù)據(jù) //如果showLabelValue返回的是value,對應(yīng)的canViewAmount參數(shù)的value就是‘value' canViewAmount(value, canView, xtType, item) { //滿足條件用“***”顯示(只是顯示),保存到數(shù)據(jù)庫還是原列表的內(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é)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問題
這篇文章主要介紹了Vue多層數(shù)據(jù)結(jié)構(gòu)響應(yīng)式失效,視圖更新失敗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02vue通過watch對input做字?jǐn)?shù)限定的方法
本篇文章主要介紹了vue通過watch對input做字?jǐn)?shù)限定的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07Vue ElementUi同時校驗(yàn)多個表單(巧用new promise)
這篇文章主要介紹了巧用new promise實(shí)現(xiàn)Vue ElementUi同時校驗(yàn)多個表單功能,實(shí)現(xiàn)的方法有很多種,本文給大家?guī)淼氖且环N比較完美的方案,需要的朋友可以參考下2018-06-06

Vue引用第三方datepicker插件無法監(jiān)聽datepicker輸入框的值的解決