Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明

Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明

1. レンダリング

レンダリング

2. データをバインドし、ツリーテーブルにラベルを追加する

ツリー コントロールのツリー ノードにイメージまたは要素 UI アイコンを追加する場合は、ツリー テーブル バインディング データにラベル アイコンを追加できます。

   子供たち: [
       {
           アイコン:'el-icon-top-right',
           ラベル: ['ビーム名',''],
           子供たち: [
               {
                   ラベル:['名前','RS49'],
               },
               {
                   アイコン:'src/assets/images/Organization.png',
                   ラベル:['グループ('+'3'+')','']
                   子供たち:[
                   {
                   ラベル:['10600361','10950','11200','0']
                    }
   					]
				}
           ]
		}
    ]、

ツリーコントロールのカスタム関数

element-uiのアイコンタグと同じクラスを直接設定します

imgタグには自分の画像のアドレスを追加する必要があります

    レンダリングコンテンツ(h,{ノード,データ,ストア}){
        //div はツリー コントロールの行を表し、div には 3 つの span タグが含まれます // ノードのラベル配列の数を決定し、3 項演算によってクラスを選択します
        // ツリーコントロールの配置を制御するクラスを設定します return h('div',[
          // ツリーコントロールのカスタム関数にアイコンと画像タグを追加します // img タグには独自の画像のアドレスを追加する必要があります h('span',{class:'top-right'}),
          h('img',{src:data.icon}),
          h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
          h('span', {class:'groupStyle'},node.label[1]),
          h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2])
          ]);
    },

3. すべてのコード

<テンプレート>
    <div class="mytree">
          <el-tree
              :data="ツリーデータ"
              :props="デフォルトプロパティ"
              @node-click="ハンドルNodeClick"
              インデント="0"
              :render-content="レンダリングコンテンツ"
          </el-tree>
        </div>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent, ref} をインポートします。
エクスポートデフォルトdefineComponent({
    コンポーネント: {},
    データ() {
        戻る {
              ツリーデータ: [
        		{
          // タイプ:1,
         		 ラベル: 'notice-id1',
                  子供たち: [
                        {

                          ラベル: ['衛星名コード', 'ZOHREH-2'],
                        },
                        {

                          ラベル: ['組織', 'IRN'],
                        },
                        {
                          ラベル: ['周波数範囲', '10950-1450'],
                        },
                        {
                          アイコン:'el-icon-top-right',
                          ラベル: ['ビーム名',''],
                          子供たち: [
                              {
                                  ラベル:['名前','RS49'],
                              },
                             {
                                  ラベル:['freq_min','10950'],
                              },
                             {
                                  ラベル:['freq_max','14500'],
                              },
                              {
                                  アイコン:'src/assets/images/Organization.png',
                                  ラベル:['グループ('+'3'+')','']
                                  子供たち:[
                                     {
                                        ラベル:['10600361','10950','11200','0']
                                     },
                                    {
                                        ラベル:['10600361','10950','11200','0']
                                     },
                                    {
                                        ラベル:['10600361','10950','11200','0']
                                     }
                                  ]
                              }
                      ]
                    },
                  ]、
                },
              ]、
            デフォルトプロパティ: {
            子供: 「子供達」
            ラベル: 'ラベル',
          },
        }
    },
    方法:{
    // カスタムツリーコントロール関数ノードは各ノードを表します renderContent(h,{node,data,store}){
        //div はツリー コントロールの行を表し、div には 3 つの span タグが含まれます // ノードのラベル配列の数を決定し、3 項演算によってクラスを選択します
        // ツリーコントロールの配置を制御するクラスを設定します return h('div',[
          // ツリー コントロールにアイコンと画像のラベルを追加します。カスタム関数 h('span',{class:[data.icon,data.icon==='el-icon-top-right'? 'top-right':'bottom-left']}),
          h('img',{src:data.icon === 'src/assets/images/Organization.png' ? data.icon:''}),
          h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
          h('span', {class:'groupStyle'},node.label[1]),
          h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2])
          ]);
    },
    }
    
})
</スクリプト>

<style lang="scss" スコープ>
    
.nodeStyle{
  幅:110ピクセル;
  表示:インラインブロック;
  テキスト配置:左;
}
.groupStyle{
  幅:150ピクセル;
  表示:インラインブロック;
  テキスト配置:左;
}
    
</スタイル>

その他の実装

Vueは要素ツリーコントロールを通じてツリーテーブルを実装します

要素ツリーコントロールに点線を追加する

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue+ElementUI はページング関数を実装します - mysql データ
  • Vue+elementuiはドロップダウンテーブルの複数選択と検索機能を実現します
  • ホバープロンプトにはvue2+elementuiを使用する
  • Vue での ElementUI の使用に関する詳細な説明
  • Element UI をインストールして vue3.0 でベクター グラフィックスを使用する方法

<<:  HTML で複数のクラス属性を定義する場合の無効な解決策

>>:  高品質なコードを書く Web フロントエンド開発実践書の抜粋

推薦する

MySQL 選択最適化ソリューションに関する簡単な説明

目次実生活からの例クエリが遅い最適化する方法カウント制限最大値と最小値 min&max実生活...

要素のフォーム要素の使用の概要

フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...

MySQL ルート パスワードをリセットするときに発生する「不明な列 'password'」問題を解決する方法

夜にMACの電源を入れたところ、突然ルートアカウントがMySQLに正常にログインできなくなったため、...

Java は Apache.POI を使用して HSSFWorkbook を Excel にエクスポートします

Apache.POI の HSSFWorkbook を使用して Excel にエクスポートします。具...

Docker Alibaba Cloud RocketMQ 4.5.1 のデプロイプロセスの詳細な説明

検索ミラー docker 検索 rocketmq画像バージョンを表示他の画像を表示したい場合は、画像...

Zabbix ベースの Jenkins プロセス監視の詳細な説明

1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...

MySql データベースのサブクエリと高度なアプリケーションの簡単な分析

MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...

HTML の類似タグと属性の違いの詳細な説明

【1】<i></i>タグと<em></em>タグ同じ...

MySQL データベースのインポートとエクスポートのデータ エラーの解決例の説明

データのエクスポートエラーを報告する 「secure_file_priv」のような変数を表示します。...

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...

色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...

Vue バックエンド管理システムのページング機能の実装例

この記事では、主に Vue バックグラウンド管理システムのページング機能の実装を紹介し、次のように共...

MySQL でのテーブルの作成と削除の詳細な例

テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...

Linux で rc.local ファイルがない場合の完璧なソリューション

新しい Linux ディストリビューションには rc.local ファイルがなくなりました。サービス...