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 を使用して Excel でデータ生成を完了する方法

Excel は、データ分析に最もよく使用されるツールです。この記事では、MySQL と Excel ...

JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明

JDBC が MySQL に接続して中国語を処理するときに文字化けする問題の解決方法の詳細説明最近、...

NginxはLua+Redisを使用してIPを動的にブロックします

1. 背景日常的なウェブサイトのメンテナンスでは、このような要件に頻繁に遭遇します。特定のクローラー...

Zabbix で監視項目と集約されたグラフを設定するためのサンプルコード

1. ローカルマシンを監視するためにZabbixエージェントをインストールするエージェントソフトウェ...

Windows での MySQL 8.0.12 のインストール手順と基本的な使用方法のチュートリアル

この記事では、WindowsでのMySQL 8.0.12のインストール手順と使用方法のチュートリアル...

JavaScript Promise の徹底解説

目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...

MySQL クエリのソートとクエリ集計関数の使用法の分析

この記事では、例を使用して、MySQL クエリのソート関数とクエリ集計関数の使用方法を説明します。ご...

Linux のスケジュールされたタスクの crontab のインストールと使用の詳細な説明

crontabをインストールするyum install crontabs CentOS 7が付属して...

CSS3で実装された読み込みアニメーション

成果を達成する実装コード <h1>123WORDPRESS.COM</h1>...

CSS+JS で水滴の波紋アニメーション ボタン効果を実装するサンプル コード

コードは次のようになります。 <!DOCTYPE html> <html lang...

Docker - コンテナマウントディレクトリを変更する3つの方法のまとめ

方法 1: 設定ファイルを変更する (docker サービスを停止する必要があります) 1. doc...

CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード

CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...

iframe を通じて DOM 要素のサイズ変更を監視する

開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...

ウェブ開発者はIE7とIE8の共存を懸念している

今日、IE8 をインストールしました。ダウンロードするために Microsoft の Web サイト...

CentOS システムの rpm インストールと Nginx の設定

目次CentOS rpm のインストールと Nginx の設定導入rpm パッケージのインストールサ...