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 用インストール ガイド

推薦する

複数の無関係なテーブルからデータをクエリし、MySQL でページングする方法

MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...

IE6、IE7、IE8 で CSS3 の丸い角と影のスタイルをサポートする

CSS3 の角丸や影の効果を使ったページを作りたいのですが、IE ブラウザでは対応していません。こ...

Ubuntu システムにおける Mysql ERROR 1045 (28000): ユーザー root@localhost へのアクセスが拒否される問題の解決方法

最初の方法: skip-grant-tables: 非常に便利なmysql起動パラメータ非常に便利な...

MySQLクエリ条件のnot inとinの違いと理由

まずSQLを書く SELECT DISTINCT from_id タラから cod.from_id ...

Vueを使用してタイマー機能を実装する

この記事の例では、タイマー機能を実装するためのVueの具体的なコードを参考までに共有しています。具体...

Webデザインチュートリアル(5):Webビジュアルデザイン

<br />前回の記事:Webデザイン講座(4):素材と表現について Webデザイン上級...

jQuery タグセレクターの適用例の詳細な説明

この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...

画像拡大鏡効果のJSバージョン

この記事では、画像拡大鏡効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容...

JavaScript を使用して QR コードを解析する 3 つの方法

目次1. JavaScriptを使用してQRコードを解析する1. QR コードとは何ですか? 2.q...

MySQL ファジークエリの使用法 (通常、ワイルドカード、組み込み関数)

目次1. MySQL ワイルドカード ファジー クエリ (%,_) 1-1. ワイルドカードの分類1...

JSの矢印関数におけるこのポイントの詳細な説明

矢印関数は ES6 の新機能です。独自の this はありません。その this ポイントは外部のコ...

フロントエンドパフォーマンス最適化に関する補足記事

序文私は、Web サイトのフロントエンド パフォーマンス最適化のための JavaScript と C...

HTML で 2 列レイアウトを実装する方法の例 (左側は固定幅、右側は適応幅)

HTMLは2列レイアウトを実装し、左側は固定幅、右側は適応幅です。実装1: <スタイル>...

html ページ!--[IE の場合]...![endif]--使用方法の詳細な紹介

コードをコピーコードは次のとおりです。 <!--[IEの場合]><script t...