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() 関数の使用に関する詳細な説明

推薦する

JavaScript parseInt() と Number() の違いのケーススタディ

学習目標: parseInt() と Number() という 2 つの関数は、文字列をデータ型に変...

jQueryはシャトルボックス機能を実現する

この記事では、シャトルボックス機能を実現するためのjQueryの具体的なコードを参考までに紹介します...

MacにMySQLをインストールするときに初期パスワードを忘れた場合の対処方法

パスワードを忘れると困ります。Mac に MySQL をインストールするための初期パスワードを忘れて...

vue+openlayer をベースにマップの集約と散乱効果を実現

目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...

16 の XHTML1.0 と HTML の互換性ガイドラインの概要

1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...

2級コンピュータ試験のMySQL知識ポイント mysql alterコマンド

テーブル構造を編集するための MySQL の alter コマンドの使用。具体的な内容は以下のとおり...

JavaScript が Jingdong の虫眼鏡の特殊効果を模倣

この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...

CocosCreator で http と WebSocket を使用する方法

目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...

システムメンテナンスページにリダイレクトするように nginx を設定する

先週末、兄弟プロジェクトはより良いサービスを提供するためにサーバーを拡張する準備をしていました。兄弟...

Vueはリストのシームレスなスクロールを実装します

この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...

Vue3とTypeScriptを組み合わせたプロジェクト開発の実践の概要

目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...

ウェブサイトのビジュアルデザインの重要なポイント

手工芸デザインからグラフィックデザイン、そしてウェブデザインまで、デザインの原則は同じままですが、私...

JSでHTML本文のスタイルを変更する

目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...

Linux で MySQL 8.0 サービスを完全に削除する方法

この記事を読む前に、Linuxコマンド、特にcentos7.3環境でyumを使用してインストールされ...

HTML 選択ボックスのプレースホルダーの作成に関する問題

テキスト入力でプレースホルダーを使用していますが、問題なく動作します。しかし、選択ボックスにはプレー...