Vue要素ツリーコントロールに点線を追加する詳細な説明

Vue要素ツリーコントロールに点線を追加する詳細な説明

1. 成果を達成する

レンダリング

2. 実装コード

ツリーコントロールへの点線の追加は主にCSSの制御によって実現され、ツリーコントロールのインデント数は0のみであるため、class="mytree"とします。

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

CSSは次のコードに設定され、スタイル浸透のために::v-deep使用されています。

<style lang="scss" スコープ>
::v-deep .mytree {
  .el-tree > .el-tree-node:after {
    上境界線: なし;
  }
  .el-tree-node {
    位置: 相対的;
    左パディング: 16px;
  }
  //ノード間に隙間があるので、展開ボタンを非表示にします。隙間が問題ないと思われる場合は削除できます。el-tree-node__expand-icon.is-leaf{
    表示: なし;
  }
  .el-tree-node__children {
    左パディング: 16px;
  }
  .el-tree-node :最後の子:前 {
    高さ: 38px;
  }
  .el-tree > .el-tree-node:before {
    左境界線: なし;
  }
  .el-tree > .el-tree-node:after {
    上境界線: なし;
  }
  .el-tree-node:before {
    コンテンツ: "";
    左: -4px;
    位置: 絶対;
    右: 自動;
    境界線の幅: 1px;
  }
  .el-tree-node:after {
    コンテンツ: "";
    左: -4px;
    位置: 絶対;
    右: 自動;
    境界線の幅: 1px;
  }
  .el-tree-node:before {
    左境界線: 1px 破線 #4386c6;
    下: 0px;
    高さ: 100%;
    上: -26px;
    幅: 1px;
  }
  .el-tree-node:after {
    上境界線: 1px 破線 #4386c6;
    高さ: 20px;
    上: 12px;
    幅: 24px;
  }
}
</スタイル>

3. その他の実装

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

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

要約する

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

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

<<:  HTML で特定のテキストを非表示にするにはどうすればよいでしょうか?

>>:  DockerでPrometheusをインストールする詳細なチュートリアル

推薦する

HTML メタタグの小さなコレクション

<Head>……</head> は <HTML> のファイル ヘ...

SQL文の最適化の一般的な手順の詳細な説明

序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...

MySQL パスワード変更方法の概要

MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...

MySQLにインデックスを追加しても効果がないいくつかの状況について簡単に説明します。

インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...

docker エントリポイントファイルの詳細な説明

Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...

HTML における br と br/ の違い

スタックフローからの回答:単に<br>だけで十分です。その他の形式は、XHTML との互...

Linux inotifyリアルタイムバックアップの実装方法の詳細説明

リアルタイム レプリケーションは、企業データをバックアップする最も重要な方法です。主に、ユーザーが送...

Javascript Bootstrapのグリッドシステム、ナビゲーションバー、カルーセルの詳細な説明

目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...

JavaScript はドラッグ可能なモーダルボックスを実装します

この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...

Ubuntuにmysql5.7.10を手動でインストールする

このチュートリアルでは、UbuntuにMySQL 5.7.10を手動でインストールする手順を参考まで...

vue3ソースコード解析の簡単な実装方法

目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...

vue-cli 3 で vue-bootstrap-datetimepicker 日付プラグインを使用する方法

需要背景最近、Vue を使用してフロントエンド エンジニアリング システムと組み合わせ、以前のデモを...

SQL ステートメント実行の詳細な説明 (MySQL アーキテクチャの概要 -> クエリ実行プロセス -> SQL 解析順序)

序文:私はずっと、SQL 文がどのように、どのような順序で実行されるのかを知りたいと思っていました。...

シェルスクリプトを使用して Docker サービスを一括で開始および停止する

目次Dockerを起動するDockerを停止するPython 呼び出しスクリプト最近、日々のテストで...