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

推薦する

Vue2.x プロジェクトのパフォーマンス最適化のためのコード最適化の実装

目次1 v-ifとv-showの使用2. 計算と監視を区別する3 v-for トラバーサルでは、アイ...

Mysql: 定義者として指定されたユーザー ('xxx@'%') が存在しません 解決策

本日のプロジェクト最適化中に、MySQL に問題が発生しました: 定義者として指定されたユーザー (...

JavaScript配列についてさらに詳しく知るのに役立つ記事

目次1. 配列の役割: 2. 配列の定義: 1. コンストラクタを通じて配列を作成する2. リテラル...

Winows Server 2019 アクティベーション コードとボリューム ライセンス エディション KMS インストール キー GVLK

最近、社内文書の整理とファイルサーバーの構成を予定しています。以前はサーバー2003を使い慣れていま...

MySql でデータの重複挿入を回避する 3 つの方法

序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...

JS を使って 1 分で github+Jekyll ブログに訪問カウント機能を追加する実装

目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...

MySQLでカンマ区切り値の列を列に変換する方法

序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...

Vue+element ui はアンカーの配置を実現します

この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具...

Docker のタイムゾーンの問題とデータ移行の問題

最新のソリューション: -v /usr/share/zoneinfo/Asia/Shanghai:/...

JS でタブ効果を書く

この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...

MySQL データベース 8 - データベース内の関数の適用の詳細な説明

データベースの組み込み関数の使用この記事では、主に日付関数、文字列関数、数学関数など、データベースの...

Webデザインチュートリアル(2):模倣と盗作について

<br />前回の記事では、Webデザインの手順と方法を紹介しました。詳細については、前...

負のマージントップ値は、ラベルテキストと入力の間の垂直中央揃えの問題を解決します。

ラベルテキストと入力の垂直方向の中央揃えを調整するのは簡単ではありません。padding、verti...

vue2 vue3 での Echarts の詳細な使用方法

目次1. インストール2. vue2でEchartsを使用するmain.jsファイル内コンテナが与え...

Linux に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...