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

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

Vueでは、要素ツリーコントロールを使用してツリーテーブルの効果を実現します。

インデントを使用して木のような効果を実現します

実装効果図

レンダリング

依存関係をインストールする

$ npm install element-plus --save

エレメント公式サイト

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

レンダリング

ダイアグラム内のコントロールの分布を分析します。各パラメータには固定widthがあります。 width値を揃えるために使用されます。

このコードは主にrenderContent関数を使用してツリーコントロールをカスタマイズします。

<テンプレート>
    <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'],
                        },
                        {
                          ラベル: '[上段] 梁名',
                          子供たち: [
                              {
                                  ラベル:['名前','RS49'],
                              },
                             {
                                  ラベル:['freq_min','10950'],
                              },
                             {
                                  ラベル:['freq_max','14500'],
                              },
                              {
                                  ラベル:[]'グループ('+'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: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ピクセル;
  表示:インラインブロック;
  テキスト配置:左;
}
</スタイル>

その他の実装

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

Element-uiはツリーコントロールノードにアイコンを追加する機能を実装します

要約する

ツリーテーブルは主に、要素のツリーコントロールのカスタム関数renderContentとCSSを組み合わせて実装されます。

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

以下もご興味があるかもしれません:
  • Vue要素ツリーコントロールに点線を追加する詳細な説明
  • Vue Element-ui テーブルはツリー構造テーブルを実現します
  • Vue コンポーネント ライブラリ ElementUI はテーブル読み込みツリー データのチュートリアルを実装します
  • Vue+element UI でツリーテーブルを実現
  • Vue+Element UI ツリー コントロールはドロップダウン機能メニュー (ツリー + ドロップダウン + 入力) を統合します。
  • Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明

<<:  MySQL シリーズ 4 SQL 構文

>>:  display または visibility を通じて HTML 要素を表示または非表示にする

推薦する

Kubernetes オブジェクトボリュームの詳細な使用方法

概要ボリュームは、さまざまなストレージ リソースを抽象化および仮想化したものです。ストレージ リソー...

Vueは右上隅の時間表示のリアルタイム更新を実装します

この記事の例では、右上隅の時間表示のリアルタイム更新を実現するためのVueの具体的なコードを紹介しま...

MySQLクエリプランでken_lenの値を計算する方法

key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...

Dockerコンテナ内にkibanaトークナイザーをインストールする方法

ステップ: 1. 仮想マシンディレクトリに新しいdocker-compose.ymlファイルを作成し...

jQueryは記事の折りたたみと展開の機能を実装します

この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考まで...

WeChatアプレットにナンバープレート入力機能を実装

目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...

MySQL でのストアド プロシージャと関数の作成の詳細な説明

目次1. ストアドプロシージャ1.1. 基本構文1.2 実行権限を指定してストアドプロシージャを作成...

ベスト HTML/CSS デザインおよび開発フレームワーク 15 選を紹介します

プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...

Node.js http モジュールの使用

目次序文ウェブHTTP サーバーファイルサーバー練習する序文Node.js 開発の目的は、JavaS...

一般的な Linux の問題に対する解決策の概要

1. VMwareでCentos7を接続し、固定IPを設定する1) まず、仮想イメージ名を右クリック...

入力ボックスのプレースホルダーテキストのデフォルトの色を変更する -webkit-input-placeholder メソッド

HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...

Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介

目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...

アリババの中秋節ロゴとウェブサイトのデザインプロセス

<br />まずアイデアを考え、次にスケッチを描き、次にマウスでスケッチし、最後にフラッ...

Vue が学ぶべき知識ポイント: forEach() の使用

序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...

MySQLを5.7にアップグレードすると、WordPressはデータをインポートするときにエラー1067を報告します

最近MySQLを5.7にアップグレードしましたが、WordPressでデータのインポート時にエラーが...