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をインストールする詳細なチュートリアル

推薦する

Zabbixのインストールと展開の詳細な説明

序文Zabbix は最も主流のオープンソース監視ソリューションの 1 つです。導入自体は難しくありま...

Vueデータ監視の原理の詳細な説明

<本文> <div id="ルート"> <h1&...

CentOS での MySQL ログイン 1045 問題を解決する

アプリケーション全体を CentOS にデプロイする必要があるため、当然ながらデータベース操作は不可...

JS ES の新機能、変数分離割り当て

目次1. 配列の分離割り当て1.1 配列分離割り当てとは何ですか? 1.2 配列分離割り当てに失敗し...

HTMLとは何ですか?

HTML 開発の歴史: HTML は英語で Hypertext Marked Language の...

MySQLの読み書き分離により挿入後にデータが選択されなくなる問題を解決

MySQLは独立した書き込み分離を設定します。コードに次のものを書くと問題が発生する可能性があります...

Vueのメソッドとプロパティの詳細な説明

Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...

CSSスコープ(スタイル分割)の使用の概要

1. CSSスコープの使用(スタイル分割) Vue では、CSS スタイルを現在のコンポーネントでの...

MySQLのロック機構の詳細な説明

序文データの一貫性と整合性を確保するために、あらゆるデータベースにはロック メカニズムが備わっていま...

MySQLインデックスが失敗するいくつかの状況の分析

1. 最左プレフィックス原則 - 複数の列にインデックスが付けられている場合は、最左プレフィックス原...

MySQL データベース アカウントの作成、認証、データのエクスポートおよびインポート操作の例

この記事では、MySQL データベースでのアカウントの作成、認証、データのエクスポートおよびインポー...

MySQL交換パーティションの詳細な例

MySQL交換パーティションの詳細な例序文exchange パーティションを紹介する前に、まず my...

Dockerコマンドの自動補完の実装

序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...

MySQL シリーズ 11 ログ

チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...

シンプルなページング効果を実現するjQuery+Ajax

この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...