ElementUI の el-dropdown に複数のパラメータを実装する方法

ElementUI の el-dropdown に複数のパラメータを実装する方法

最近、業務上のボタンの増加により、ページレイアウトにボタンが多すぎて、ページが美しくなく、ユーザーエクスペリエンスが良くありません。そこで、el-dropdownを使用してドロップダウンボタンを作成することを考えました(複数のボタンを統合してドロップダウンを実装します)

ここに画像の説明を挿入

ただし、ElementUi 公式ドキュメントの handleCommand メソッドでは、選択したオプションをトリガーするために使用される 1 つのパラメータのみを渡すことができます。実際には、現在の行番号を持つオブジェクトを渡す必要もあります (私のようにテーブルを使用してデータを表示する場合)。次に、このオブジェクトのいくつかのフィールドを使用して、追加、削除、変更、およびクエリ操作のためにバックグラウンドに渡します。

ElementUi の公式ドキュメントにある el-dropdown の例は次のとおりです。
el-dropdown 公式ドキュメント

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    ドロップダウン メニュー<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="ドロップダウン">
    <el-dropdown-item command="a">ゴールデンケーキ</el-dropdown-item>
    <el-dropdown-item command="b">ライオンヘッド</el-dropdown-item>
    <el-dropdown-item command="c">カタツムリライスヌードル</el-dropdown-item>
    <el-dropdown-item command="d" disabled>ダブルスキンミルク</el-dropdown-item>
    <el-dropdown-item command="e" split>牡蠣オムレツ</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<スタイル>
  .el-ドロップダウンリンク{
    カーソル: ポインタ;
    色: #409EFF;
  }
  .el-icon-arrow-down {
    フォントサイズ: 12px;
  }
</スタイル>

<スクリプト>
  エクスポートデフォルト{
    メソッド: {
      ハンドルコマンド(コマンド) {
        this.$message('アイテムをクリック' + コマンド);
      }
    }
  }
</スクリプト>

handleCommand メソッドを実行する前に、コマンド パラメータをオブジェクトに再パッケージ化して、後の呼び出しに必要なデータが含まれるようにする必要があります。

コードは次のとおりです。

<el-table-column label="操作 1">
    <テンプレート スロット スコープ="スコープ">
        <el-dropdown 分割ボタン type="primary" @command="handleCommand">
            その他の操作 <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'a')">放棄</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'b')">オリジナルをアップロード</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'c')">オリジナルアレンジ</el-dropdown-item>
                <el-dropdown-item 無効 :command="beforeHandleCommand(scope.$index, scope.row,'d')">フリーズ</el-dropdown-item>
                <el-dropdown-item disabled :command="beforeHandleCommand(scope.$index, scope.row,'e')">フリーズ解除</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </テンプレート>
</el-table-column>

表に書き込むため、スロットが必要となり、実際の状況に応じて具体的な修正を加えます。メソッドをタグの command 属性にバインドします。このメソッドは必要なパラメータを渡し、このメソッドを使用してそれをオブジェクトにカプセル化し、このオブジェクトを handleCommand メソッドに渡します。

<スクリプト>
エクスポートデフォルト{
    メソッド: {
        handleAbandon(インデックス、行) {
           //やること
        },
        handleUpload (インデックス、行) {
            //やること
        },
        handleSettle(インデックス、行){
           //やること   
        },
        beforeHandleCommand(インデックス、行、コマンド){
            戻る {
                'インデックス': インデックス、
                '行': 行、
                'コマンド':コマンド
            }
        },
        ハンドルコマンド(コマンド) {
            スイッチ (コマンド.コマンド) {
                case "a"://abandon this.handleAbandon(command.index,command.row);
                    壊す;
                case "b"://元のファイルをアップロードします this.handleUpload (command.index, command.row);
                    壊す;
                case "c"://元の配置 this.handleSettle(command.index,command.row);
                    壊す;
            }
        }
    },
}
</スクリプト>

ElementUI で el-dropdown の複数のパラメータを実装する方法についての記事はこれで終わりです。ElementUI で el-dropdown の複数のパラメータを渡す方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue+elementは背景のel-dropdownドロップダウン機能の小さな要約を構築します

<<:  MYSQLストアドプロシージャコメントの詳細な説明

>>:  フロントエンドとバックエンド分離プロジェクトのDockerデプロイメントの実装例

推薦する

Vue で @person 関数を実装する方法

この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...

MySQL Innodbインデックスの原理の詳細な説明

導入振り返ってみると、4年前、私がMySQLのインデックスについて学んでいたとき、先生はインデックス...

Meituan DBデータをデータウェアハウスに同期するアーキテクチャと実践

背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...

弾力性のあるナビゲーション効果を実現するJavaScript

この記事では、弾性ナビゲーション効果を実現するためのJavaScriptの具体的なコードを参考までに...

Nginx の break と last の違いの詳細な分析

まずは違いについて話しましょう最後に、書き換えられたルールは、次の場所と一致させるために書き換えられ...

MySQLのマスタースレーブレプリケーションと読み取り書き込み分離を理解するための記事

目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....

IDEA で Linux コマンドを使用する方法

Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...

CSS 命名: BEM、スコープ付き CSS、CSS モジュール、CSS-in-JS の説明

CSS の適用範囲はグローバルです。プロジェクトがどんどん大きくなり、参加する人が増えるにつれて、命...

MySQLデータベースのトランザクションとロックの詳細な分析

目次1. 基本概念酸3.自動コミット4. トランザクション分離レベル5. 同時実行の一貫性の問題6....

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...

MySql の知識ポイント: トランザクション、インデックス、ロックの原則、使用状況の分析

この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...

Python ベースの MySQL レプリケーション ツールの詳細な説明

目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...

ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例

CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...

この記事では、VUE の複数の DIV とボタン バインディングの Enter イベントを実装する方法を説明します。

現在、OK ボタンをクリックしたときやキーボードの Enter キーを押したときに操作を実行するとい...