Complex layout structure, integrating tree component with table component, where each node represents a row

Preface

This article introduces a relatively complex layout method that integrates a tree component with a table component, where each node of the tree has a row configuration.
The comparison product page is as follows:

Requirement Analysis

Looking at this page, our first thought is of a tree component and a table component.
If we want to treat the right side as a table component, it would be quite complicated. This is because it involves the folding of tree nodes, and the corresponding rows also need to be folded.
So the simplest approach is to simulate the table on the right side by writing each row into the tree node. This way, when the node is folded, the corresponding rows are also folded accordingly.

Code Implementation

The header at the top is implemented as a separate div and is offset to the right.

<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>

The tree on the left uses the tree component from element-plus for display.
Each node should be written using slots, which allows for separate handling of many logics, such as using different icons for different levels.
The number of cells per node can be set individually.
The number of cells is implemented using CSS classes. For cells that cannot be clicked, the background color is set to transparent or consistent with the background color.
Whether each cell is displayed and what color it displays are related to the node data and cell type.
Therefore, when obtaining the CSS class of a cell, two parameters, cell type and node, are used. As follows
<div :class="showCell(1, node)" class="node-rules-cell" />

It is particularly important to note that:
The tree has different levels, and the distance of each level indented to the right is different. In order to ensure that the width of the book nodes does not affect the layout of subsequent cells.
We need to align the ends of the tree nodes, and the width of all nodes at different levels is different.
We can write it like this.

@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) ;
  }
}

The width of the first-level node is 340px, the second level is 340-16, and the width of the third-level node is 340 - 16 * 2. And so on.

Some details we need to handle are to make some optimizations for the hover and focus states of nodes.

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

Demo effect