複雑なレイアウト構造、ツリーコンポーネント統合表コンポーネント、各ノードは1行を表す

前の記事

この記事では、より複雑なタイポグラフィ方法を紹介します。ツリーコンポーネントはテーブルコンポーネントを統合し、ツリー内の各ノードは1行の構成を持っています。
比較製品ページは以下の通りです。

ニーズ分析

このページを見ると、最初に思い浮かぶのはツリーコンポーネントとテーブルコンポーネントです。
右側をテーブルコンポーネントとして座る場合は、よりコピーされます。ツリーノードの折りたたみが関与するため、対応する行も折りたたまれます。
最も簡単な方法は、右側のテーブルをシミュレートし、各行をツリーノードに書き込むことです。このように，ノードを折り畳む場合，対応する行もそれに応じて折り畳まれる.

コードの実装

先頭のヘッダーは、右にオフセットされた個別のdiv実装です。

<div class="top-header">
  <div class="col-item">
    Row count
  </div>
  <div class="col-item">
    Column count
  </div>
  <div class="col-item">
    Custom SQL
  </div>
  <div class="col-item">
    Freshness
  </div>
  <div class="col-item">
    Cardinality
  </div>
  <div class="col-item">
    Uniqueness
  </div>
  <div class="col-item">
    Nullness
  </div>
  <div class="col-item">
    Distribution
  </div>
</div>

左側のツリーはelement-plusのツリーコンポーネントを使用して表示されます。
各ノードはスロットを使用して記述する必要があり、異なるレベルで異なるアイコンを使用するなど、多くのロジックを個別に処理できます。
各ノードのセル数は個別に設定できます。
セル数はCSSのクラスを使用して実装され、クリックできないセル、背景色は透明に設定されているか、背景色と一致しています。
各セルが表示されるかどうか、表示される色は、ノードのデータとセルの種類に依存します。
したがって、cellのCSSクラスを取得するときは、cell type 1とnodeの2つの引数を使用します。以下の通り
<div :class="showCell(1, node)" class="node-rules-cell" />

特に注意が必要なのは：
ツリーには様々なレベルがあり、それぞれのレベルは右に異なる距離でインデントされます。ブックノードの幅を達成するために、後続のセルのレイアウトに影響しません。
ツリーノードの端を揃える必要があり、異なるノードの幅はすべて同じではありません。
こんな風に書けます

@levMargin: 16px;
.node-info {
  width: 340px;
  margin-right: 12px;
  &.node-lev2{
    width: calc(340px - @levMargin) ;
  }
  &.node-lev3{
    width: calc(340px - @levMargin * 2) ;
  }
  &.node-lev4{
    width: calc(340px - @levMargin * 3) ;
  }
}

第1レベルノードの幅は340px、第2レベルノードの幅は340-16、第3レベルノードの幅は340 - 16 * 2です。このように。

いくつかの詳細は、ノードのホバーとフォーカスの最適化を行う必要があります。

.el-tree-node__content:hover .node-rules{
  background-color: #fff;
}
.el-tree-node:focus>.el-tree-node__content .node-rules{
  background-color: #fff;
}

効果の表示