" />

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中filter的應(yīng)用場(chǎng)景詳解

 更新時(shí)間:2021年11月21日 16:33:09   作者:qq_44221093  
這篇文章主要為大家介紹了vue中filter的應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助

filter一般用于過(guò)濾某些值,比如我這個(gè)字段是空,可是我想在前端顯示“–”,就可以使用到它了。

最近碰到一個(gè)需求就是要給某些字段可以設(shè)置權(quán)限去以其他形式顯示,比如以“***”顯示需要隱藏的金額。

1.獲取金額權(quán)限

2.通過(guò)filter過(guò)濾滿足條件的字段

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就不寫出來(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) {
    //滿足條件用“***”顯示(只是顯示),保存到數(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引用第三方datepicker插件無(wú)法監(jiān)聽(tīng)datepicker輸入框的值的解決

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

    這篇文章主要介紹了Vue引用第三方datepicker插件無(wú)法監(jiān)聽(tīng)datepicker輸入框的值的解決,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • 解決Vue前后端跨域問(wèn)題的方式匯總

    解決Vue前后端跨域問(wèn)題的方式匯總

    這篇文章主要介紹了解決Vue前后端跨域問(wèn)題的多種方式,本文主要介紹借助解決Vue前后端跨域問(wèn)題的幾種方式,將會(huì)使用axios進(jìn)行請(qǐng)求需要的朋友可以參考下
    2022-11-11
  • Vue中父子組件通信與事件觸發(fā)的深入講解

    Vue中父子組件通信與事件觸發(fā)的深入講解

    組件是Vue核心功能之一,合理的組件化,可以減少我們代碼的冗余,提高項(xiàng)目的可維護(hù)性,下面這篇文章主要給大家介紹了關(guān)于Vue中父子組件通信與事件觸發(fā)的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • 最新評(píng)論