复杂布局结构，树形组件集成表格组件，每个节点代表一行

前言

本篇文章介绍一种比较复杂的排版方式，是一种树形组件集成了表格组件，树的每一个节点都具有一行配置。
对比产品页面如下：

需求分析

看个这个页面，我们首先想到的是，一个树组件，和一个表格组件。
如果要把右侧当成表格组件坐起来是比较复制的。因为涉及到树节点的折叠，对应的行也要折叠。
所以最简单的办法是，模拟右侧的表格，将每一行写到树节点中。这样，折叠节点时，对应的行也相应被折叠。

代码实现

顶部的表头是一个单独的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的树组件来展示。
每一个节点应该使用插槽来写，这样可以单独处理很多逻辑，比如为不同层级使用不同的icon。
每个节点的单元格数量可以单独设置。
单元格数量使用css的类来实现，无法点击的单元格，背景色设置为透明，或与底色设置为一致。
每一个单元格显示与否，显示什么颜色，都与节点的数据和单元格类型有关。
所以在获取单元格的css类时，使用单元格类型1和node两个参数。如下
<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) ;
  }
}

第一级节点的宽度为340px，第二级为340-16，第三级节点的宽度为340 – 16 * 2。以此类推。

一些细节处理就是我们需要为节点的hover，focus 时做一些优化。

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

演示效果