Vue + 要素を使用して背景データをオプションに動的に表示する

Vue + 要素を使用して背景データをオプションに動的に表示する

必要:

ハードコードされたデータの代わりに、セレクター内のオプション値の動的な表示を実装します。私のロールIDデータは次のとおりです。

ここに画像の説明を挿入

これらのデータリクエストをオプションに表示する必要があります

実装は次のとおりです。

element-ui でセレクターを使用します。

<el-form-item label="ロールID:" prop="roleId">
    <el-select v-model="addUserForm.roleId" placeholder="ロールIDを選択してください">
      <el-オプション
          v-for="roleList 内の項目"
          :key="アイテム.値"
          :label="アイテム.ラベル"
          :value="アイテムの値">
      </el-option>
    </el-select>
</el-form-item>

データ内の空の配列をカスタマイズします。

ここに画像の説明を挿入

メソッドにデータを実装するためのリクエストを記述します。

ロールリストを取得する() {
   getRoleList(this.name).then(res => {
     結果を res.data.items とします。
     console.log("ロールリストを取得します: " +JSON.stringify(this.roleList));
     結果.forEach(要素 => {
     	this.roleList.push({label:要素名,value:要素名});
     });
     }).catch( エラー => {
       コンソール.log(エラー);
  });
},

作成された実装の表示:

ここに画像の説明を挿入

getRoleList は私がカプセル化した get リクエストです。

ここに画像の説明を挿入

結果は次のとおりです。

ここに画像の説明を挿入

Vue + 要素を使用して背景データをオプションに動的に表示する方法についてはこれで終わりです。Vue 要素の動的オプションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+Element uiはバックグラウンドの戻りデータに応じて動的なヘッダー操作を設定します
  • Vue+elementは、3階層のメニューページを表示する操作を実装するために動的読み込みルーティングを使用します。

<<:  Linux FTP匿名アップロードとダウンロードが自動的に開始される問題を解決する

>>:  MySQL 8.0.11 Mac 用インストール ガイド

推薦する

ECMAScriptにおけるプリミティブ値と参照値の詳しい説明

目次序文動的プロパティとは何ですか?値のコピー値の種類を決定する要約する序文これは JavaScri...

シンプルなカレンダー効果を実現する js

この記事では、シンプルなカレンダー効果を実現するためのjsの具体的なコードを参考までに共有します。具...

MySQLステートメントを監視する方法の詳細な説明

クイックリーディングSQL ステートメントを監視する必要があるのはなぜか、監視方法と監視手段について...

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...

el-tree での不完全なテキスト表示の解決策

目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...

フォーム送信時に追加のパラメータを渡すためのいくつかの一般的な方法

フォームを送信するときに、送信前に追加のパラメータが追加される状況が発生する場合があります。この問題...

HTML 基本コントロール入門_PowerNode Java アカデミー

<input> タグ<input> タグはユーザー情報を収集するために使用さ...

dockerでnginxを実行するときにdaemon offが使用される理由についての簡単な説明

とても嬉しいです。この問題に遭遇したとき、私はDockerコンテナのプロセス原理について話さなければ...

Vueキャッシュ機能の使い方

目次vue2のキャッシュ機能Vue キャッシュ関数の変換最適化要約するvue2のキャッシュ機能vue...

Docker の Windows ストレージ パス設定操作

Windows 10 に Docker をインストールする場合、コンテナタイプを Linux コンテ...

Linuxターミナルでファイルを作成する2つの一般的な方法を簡単に理解する

mkdir コマンドを使用して新しいディレクトリを作成できることは誰もが知っていますが、多くの場合、...

nginx での書き換えジャンプの実装

1. 新旧ドメイン名のジャンプ適用シナリオ: ドメイン名ベースのリダイレクト。会社の古いドメイン名は...

効率的な視覚化Nginxログ表示ツール

目次導入インストール表示フィールドフィルターソートキー導入Rhit は、標準フォルダー (gzip ...

JavaScript で知らない Object.entries の使い方

目次序文1. 共通オブジェクトを反復処理するには for...of を使用します2. 通常のオブジェ...

HTML CSS3は画像表示効果を引き伸ばさない

1. transform 属性を使用して、画像を拡大せずに表示します (パスの問題は必要に応じて修正...