H5W3
当前位置:H5W3 > 其他技术问题 > 正文

用vue的递归组件写了一个树形列表,有一个关于递归结构的线条展示问题

图片描述

如上图所示,用vue的递归组件渲染了一个树形结构,json数据结构如下:

processDatas: [
    {
      id: 1,
      type: 'high',
      level: 1,
      children: null,
    },
    {
      id: 2,
      type: 'medium',
      level: 1,
      children: [
        {
          id: 3,
          type: 'low',
          level: 2,
          children: [
            {
              id: 7,
              type: 'high',
              level: 3,
              children: [
                {
                  id: 8,
                  type: 'medium',
                  level: 4,
                  children: null,
                },
              ],
            },
          ],
        },
        {
          id: 4,
          type: 'medium',
          level: 2,
          children: [
            {
              id: 5,
              type: 'high',
              level: 3,
              children: null,
            },
            {
              id: 6,
              type: 'low',
              level: 3,
              children: null,
            },
          ],
        },
      ],
    },
  ],

图片描述

每一个子节点前面的两条线段分别是用after和before伪类的绝对定位画出来的,如果只有一个层级的关系,那能正常显示关系,但是如果出现下面这样多层的关系,线段长度就不够用了,这样的算法,或者说显示原理应该怎么写呢?
图片描述

回答:

如果要对父级和前一个兄弟进行判断的话,单纯CSS似乎不太好实现?

我大概用JSFiddle在线写了一个

实现出来长这样

clipboard.png

因为不知道你的Dom结构

才疏学浅,有点献丑了
JSFiddle

每一个递归组件的格式大概是

div.a  //顶层递归嵌套的顶层div
    div.b //为了实现顶部padding的中间div
        div.c //实际的注入类
        slot //子元素的的位置

看起来应该是这样

  <div class="a">
    <div class="b">
      <div class="c"></div>
      <slot />
    </div>
  </div>

然后CSS是利用.b{border-left:1px solid #000;}

为了实现长长的那一根,需要你在创建的时候进行判断,如果该节点有后一个兄弟节点的话,div.a加一个.long

CSS里面要这么加一句


.a.long{
  border-left:1px solid #000;
}

.long>.b{
  border-left:none;
}

本文地址:H5W3 » 用vue的递归组件写了一个树形列表,有一个关于递归结构的线条展示问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址