前言

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

复杂布局结构,树形组件集成表格组件,每个节点代表一行插图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的树组件来展示。
每一个节点应该使用插槽来写,这样可以单独处理很多逻辑,比如为不同层级使用不同的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;
}

演示效果

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

相关新闻

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

邮箱

cloud@modbus.cn

QQ
QQ
微信
微信
分享本页
返回顶部