Vue のフィルターの適用シナリオの詳細な説明

Vue のフィルターの適用シナリオの詳細な説明

filterは通常、特定の値をフィルターするために使用されます。たとえば、フィールドが空だが、フロントエンドに「–」を表示したい場合、これを使用できます。

最近、非表示にする必要がある金額を「***」として表示するなど、特定のフィールドを他のフォームに表示するための権限を設定する必要があるという要件に遭遇しました。

1.金額権限を取得する

2.フィルターを使用して条件を満たすフィールドをフィルタリングする

3.非表示のスタイルを戻す

コードを見てみましょう:

// 残りは、私がマークしたものを見てください。 //scope.row は現在の行を取得します <template slot-scope="scope">
            <テンプレート v-if="item.formType == 'ラベル'">
              <el-ボタン
                v-if="item.link!=未定義"
                タイプ="text" サイズ="small" @click="handleColumnClick(item.link,scope.row)">
                //filter は通常フィルタリングには使用されません|
                //showLabelValue は書き出されません //メソッドの 1 つのパラメータに対応するフィルタには 2 つのパラメータがあります //最初のパラメータは前の列によって返される値です //N-1 番目のパラメータは渡す値です {{ scope.row | showLabelValue(item) | canViewAmount(canViewAmount,xtType,item) }}
              </el-button>
              <テンプレート v-else>
                {{ scope.row | showLabelValue(item) | canViewAmount(canViewAmount,xtType,item) }}
              </テンプレート>
            </テンプレート>
</テンプレート>
エクスポートデフォルト{
 フィルター:
 //row は、scope.rowshowLabelValue(row,item) によって返されるデータです。
 '値'を返す
 }
 //値、canView 権限、xtType のページ、アイテム リスト データ //showLabelValue が値を返す場合、対応する canViewAmount パラメータ値は 'value' です
    canViewAmount(値、canView、xtType、項目) {
    //条件が満たされると、「***」が表示されます(表示のみ)。データベースに保存される内容は元のリストのままです。if (!canView && xtType == 'salesOrder') {
        if (item.field == 'priceNoTax' || item.field == 'amountNoTax' || item.field == 'price' || item.field == 'amount') {
          戻る '***'
        }
      }
      if (!canView && xtType == 'プロジェクト') {
        if (item.field == 'amount' || item.field == 'amountNoTax') {
          戻る '***'
        }
      }
      戻り値
    }
  },

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • VUEでフィルターを使用する方法
  • Vueフィルターとディレクティブがこれにアクセスする問題の詳細な説明
  • Vueでフィルターを使用するときにこれが未定義になる問題
  • vueフィルターがこのオブジェクトを取得できない問題を解決する
  • Vue のデータとイベントのバインディングとフィルターの詳細な説明
  • Vueフィルターの使い方
  • Vue フィルターの 4 つの使用方法のまとめ

<<:  jquery.form.js が IE でアクセスを拒否し、入力アップロード ボタンをアクティブにクリックする必要がある問題

>>:  MySQL における IF()、IFNULL()、NULLIF()、および ISNULL() 関数の使用に関する詳細な説明

推薦する

選択/フォーカス時にすべてのオプションをリストする現在のより良い方法

開発中にこのような要件に遭遇したので、将来使用するために記録しました。需要背景キーボード ショートカ...

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...

ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...

ウェブサイトのデザインを改善するための役立つ提案を提供します

<br />ウェブサイトを科学的にデザインする: アイトラッキング研究から学ぶ 23 の...

フロントエンドフレームワーク Vue における親子コンポーネントデータの双方向バインディングの実装

目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...

MySQLからOracleへのリアルタイム同期ソリューションの詳細な説明

1 要件の概要MySQL5.6本番データベースの複数のテーブルのデータは、Oracle11gデータウ...

JavaScript ES 新機能ブロックスコープ

目次1. ブロックスコープとは何ですか? 2. ブロックスコープが必要なのはなぜですか? 3. 関数...

TypeScript 2.0 マーク付き共用体型の詳細な説明

目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...

CSSは、マウスを線の上に置くと線全体の色を変える効果を実現します。

まとめ:以下のように、CSS で指定した行にマウスを置いたときに行全体の色を変更する方法を示します。...

意外と知らないLinuxのSSHコマンドの使い方7選を徹底解説

システム管理者は複数のサーバーを同時に管理する場合があり、これらのサーバーは異なる場所に配置されてい...

Vue は検証コードのカウントダウンボタンを実装します

この記事では、検証コードカウントダウンボタンを実装するためのVueの具体的なコードを例として紹介しま...

Alibaba Cloud Centos 7.5 に MySQL をインストールするチュートリアル

CentOS 7 の yum ソースには、MySQL を正常にインストールするための mysql-s...

きちんとした標準的なHTMLタグの書き方を学ぶ

優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず...

CentOS 7にMySQLをインストールする詳細な手順

CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...

Prometheusコンテナのデプロイメントのための実用的なソリューション

環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...