1. 成果を達成する2. 実装コードツリーコントロールへの点線の追加は主にCSSの制御によって実現され、ツリーコントロールのインデント数は0のみであるため、class="mytree"とします。 <div class="mytree"> <!--インデントは 0 のみにできます--> <el-tree :data="ツリーデータ" :props="デフォルトプロパティ" @node-click="ハンドルNodeClick" インデント="0" :render-content="レンダリングコンテンツ" </el-tree> </div> CSSは次のコードに設定され、スタイル浸透のために <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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTML で特定のテキストを非表示にするにはどうすればよいでしょうか?
>>: DockerでPrometheusをインストールする詳細なチュートリアル
<Head>……</head> は <HTML> のファイル ヘ...
序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...
MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...
インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...
Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...
スタックフローからの回答:単に<br>だけで十分です。その他の形式は、XHTML との互...
リアルタイム レプリケーションは、企業データをバックアップする最も重要な方法です。主に、ユーザーが送...
目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...
この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...
Shutdown.batファイルには次の文があります "%CATALINA_HOME%&q...
このチュートリアルでは、UbuntuにMySQL 5.7.10を手動でインストールする手順を参考まで...
目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...
需要背景最近、Vue を使用してフロントエンド エンジニアリング システムと組み合わせ、以前のデモを...
序文:私はずっと、SQL 文がどのように、どのような順序で実行されるのかを知りたいと思っていました。...
目次Dockerを起動するDockerを停止するPython 呼び出しスクリプト最近、日々のテストで...