您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue的filter如何應(yīng)用”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“vue的filter如何應(yīng)用”文章能幫助大家解決問題。
filter
一般用于過濾某些值,比如我這個(gè)字段是空,可是我想在前端顯示“–”,就可以使用到它了。
最近碰到一個(gè)需求就是要給某些字段可以設(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就不寫出來了 //方法一個(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) { //滿足條件用“***”顯示(只是顯示),保存到數(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 } },
關(guān)于“vue的filter如何應(yīng)用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。