element plus Tree组件实现瀑布流布局

相信小伙伴们在学习用element组件来开发电商后台页面功能时都用过Tree组件吧，在开发商品分类或者菜单权限功能时都会用到它。当一级分类条目很多时，自上而下的展示再结合滚动条来操作会非常不方便。本篇小卷带大伙儿实现Tree组件的瀑布流布局的改造，以优化用户使用体验。

首先我们在上一篇《vue传送门组件实现分类树的聚焦编辑》的功能基础上继续完成后台的增删改的接口对接，关于这一块的API对接，小卷会再单独写一篇笔记来介绍。相关的后台接口实现可以参考《spring boot小卷生鲜电商项目实战》这篇专栏中的相关笔记。

默认的实现效果

从上面的演示，我们发现这种布局使得查看或者编辑都不是那么人性化。

友情提醒

当小伙伴们在照着手头的教程实现一些页面功能时，一定要站在产品和用户的角度来审视操作的便利性，另外界面一定要大气，元素排布要舒展，要充分利用好空间。

调整布局

只需要在全局样式文件中，给.el-tree增加.horizontal的样式即可：

scss 复制代码

// tree横向布局
.el-tree.horizontal {
  width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  > .el-tree-node {
    width: 320px;
    margin: 0 10px 20px 10px;
    background: #FAFAFA;
    // 去掉树一级节点左边的连线
    &:before, &:after {
      display: none;
    }
  }
}

这里我们为.el-tree最外层的.el-tree-node采用了flex布局，看下页面的效果：

注意

为了方便截图，将屏幕分辨率调整为1080p，浏览器缩小为75%

我们看到这样调整后，一级分类条目会按照从左到右，超出的内容再换到下一行来展示，总体来说可以很好的利用屏幕的空间。

看下编辑后的效果：

我们发现当一个一级分类下新增的子分类越来越多，它会把整个一行的三个大类区域都扩高，这样空间利用率就变低。

再启用节点拖拽的功能，我将看到这种布局明显的弊端：

说明

当前的拖拽只是前端的实现，并未对接后台的拖拽接口，并且也未限制层级的要求（不超过三级），仅仅是做布局的演示

瀑布流布局实现

接下来我们将进一步优化，用css支持的column布局来实现瀑布流布局。

其实改造非常简单，就几行代码：

scss 复制代码

@media screen and (max-width:960px) {
  .el-tree.horizontal {
    column-count: 1;
  }
}

@media screen and (min-width:960px) {
  .el-tree.horizontal {
    column-count: 2;
  }
}

@media screen and (min-width:1240px) {
  .el-tree.horizontal {
    column-count: 3;
  }
}

@media screen and (min-width:1560px) {
  .el-tree.horizontal {
    column-count: 4;
  }
}

// tree横向布局
.el-tree.horizontal {
  width: 100% !important;
  //display: flex;
  //flex-wrap: wrap;
  //align-items: flex-start;
  // 瀑布流
  column-gap: 10px;
  counter-reset: count;
  ...
}

这里我们实现了屏幕宽度的自适应，通过瀑布流布局我们可以很好的利用屏幕空间了，并且整个瀑布流的布局中一级分类的顺序依然维持着从上往下从左到右的顺序（为了方面看，在名称中显示了id）：

美中不足的是一个大类的区域发生了跨列的断开现象，只需要加下面样式就可修复：

scss 复制代码

.el-tree.horizontal {
  ...
  > .el-tree-node {
    ...
    -webkit-column-break-inside: avoid;
    ...
  }
}

再看效果，ok！

使用column实现瀑布流非常的简单，并且很适用这里的场景，当我们新增或删除内容，或者折叠、展开分类条目，都会触发瀑布流的自适应布局：

只不过这里因为折叠、展开的动画，使得布局的调整出现闪烁的不好体验，为了实现"完美"，我们干脆关闭动画效果：

scss 复制代码

.el-tree.horizontal {
  ...
  // 关闭展开和折叠的动画
  .el-collapse-transition-enter-active, .el-collapse-transition-leave-active {
    transition: none;
  }
}

看最后优化后的展示：

好了，现在我们得到了一个较为完美的商品分类树维护界面了，后续我们将在这个实现的基础上完成分类拖拽功能的后台对接，大家加油！