Flex Tree加虚线显示效果+替换原始图标，保姆级教程一看就会

Flex Tree加虚线：从原理到实操，解决你90%的样式问题

先问你个问题：为什么要给Flex Tree加虚线？我之前跟做用户体验的朋友聊过，他说层级结构的核心是“引导视线”——虚线能帮用户快速定位“这个节点属于哪一层”，比实线更柔和，也不会像实线那样把界面分割得太碎。比如产品文档里的API列表，用虚线的话，用户看“模块-子模块-接口”时，眼神能顺着虚线快速扫到对应的内容，比默认的实线至少省3秒。

那虚线是怎么实现的？其实Flex Tree的底层结构大多是嵌套的

和

Flex Tree的每个节点（

我把自己调过5次的步骤整理成“傻瓜版”，你跟着做就行：

第一步：清除默认样式，给Flex Tree“扒层皮”

Flex Tree默认会有margin、padding和list-style（比如圆点），这些会影响虚线的对齐，所以先清掉：

.tree {
 margin: 0;
 padding: 0;
 list-style: none; / 去掉默认的圆点 /
}
.tree li {
 position: relative; / 关键！伪元素的定位基准 /
 padding: 8px 0 8px 24px; / 左边留24px放虚线，上下留8px间距 /
}

这里的padding-left: 24px是给虚线留位置，你可以根据项目调整——比如文字大的话，就调大到30px，保证虚线和文字不挤在一起。

第二步：用伪元素画虚线，让层级“显形”

接下来给每个

/ 给有子节点的li加左边虚线 /
.tree li.has-child::before {
 content: '';
 position: absolute;
 left: 8px; / 虚线距离左边的位置，和padding-left对应 /
 top: 0;
 bottom: 0;
 border-left: 1px dashed #eee; / 虚线样式：1px、浅灰色 /
}
/ 给每个层级的li加底部虚线（可选，用来分隔节点） /
.tree li::after {
 content: '';
 position: absolute;
 left: 8px;
 top: 16px; / 对齐文字的中间位置 /
 width: 16px; / 底部虚线的长度，和padding-left对应 /
 border-bottom: 1px dashed #eee;
}

我给小张调完这一步后，他说：“原来虚线不是‘画上去’就行，得‘贴’着层级走啊！”——其实道理很简单，样式的核心是“匹配用户的视觉逻辑”，你让虚线跟着层级缩进，用户看的时候自然就能“顺着线找节点”。

替换Flex Tree原始图标：3种方法，总有一个适合你

Flex Tree的原始图标（比如默认的文件夹、加号/减号）是最容易“拉低质感”的部分——比如你做的是科技类项目，默认的文件夹图标会显得“太传统”；做教育类项目，加号图标又显得“太生硬”。我试过3种替换方法，从“小白友好”到“前端专属”，总有一个适合你。

Iconfont应该是最常用的方法了——图标多、免费、能直接用CSS调用，我帮做教育平台的小李换图标时，只用了10分钟就搞定。步骤如下：

第一步：选图标，下载代码

打开Iconfont官网，搜索你需要的图标（比如“课程”“文档”“展开”“折叠”），加入购物车后下载“Font class”格式的代码——下载包里面有iconfont.css（图标样式）、iconfont.ttf（字体文件）等。

第二步：引入Iconfont到项目

把下载的文件放到项目的css文件夹里，然后在HTML里引入iconfont.css：

第三步：替换默认图标

找到Flex Tree默认图标的类名（比如Ant Design的Tree组件用.ant-tree-icon，Element UI用.el-tree-node__expand-icon），把类名换成Iconfont的类名就行。比如原来的展开图标是：

换成Iconfont的“展开”图标：

然后调整图标的大小和颜色：

.iconfont {
 font-size: 16px; / 和文字大小匹配，比如文字是14px，图标就16px /
 color: #666; / 图标颜色，和文字颜色一致更协调 /
 margin-right: 8px; / 和文字之间留8px间距，避免挤在一起 /
}

小李用这个方法换了“课程”和“章节”图标后，用户反馈“课程导航看起来更有‘教育感’了”——其实就是图标和项目场景匹配了，用户看着更亲切。

如果Iconfont里没有你要的图标（比如你要做“手绘风格”的项目），可以用自定义图片。我帮做文创店的小王换图标时，用了他们设计师画的“铅笔”“笔记本”图标，效果特别好。注意这3点：

.tree-icon {
 width: 16px;
 height: 16px;
 background-image: url('./images/close.png');
 background-size: cover; / 让图片填满容器 /
 margin-right: 8px;
}
.tree-icon.open {
 background-image: url('./images/open.png');
}

小王用这个方法换了图标后，文创店的后台导航看起来“像他们的产品一样有温度”——其实自定义图片的核心是“传递品牌风格”，你用和产品一致的图标，用户会觉得“这个后台是‘专属’的”。

如果不想加载额外的字体或图片，可以用CSS绘制图标——比如用border和transform做加号/减号，用border-radius做圆形图标。这种方法的好处是加载快、无兼容问题，我帮做工具类网站的小陈调样式时，用这个方法做了“代码”和“设置”图标，加载速度比原来快了15%。

比如做一个“加号”图标：

.plus-icon {
 width: 16px;
 height: 16px;
 position: relative;
}
.plus-icon::before,
.plus-icon::after {
 content: '';
 position: absolute;
 background-color: #666;
}
.plus-icon::before {
 left: 50%;
 top: 3px;
 bottom: 3px;
 width: 1px; / 竖线 /
 transform: translateX(-50%); / 居中 /
}
.plus-icon::after {
 top: 50%;
 left: 3px;
 right: 3px;
 height: 1px; / 横线 /
 transform: translateY(-50%); / 居中 /
}
/ 折叠状态换成减号，隐藏竖线 /
.minus-icon::before {
 display: none;
}

用CSS绘制图标需要一点前端基础，但胜在“灵活”——你可以调整颜色、大小、形状，完全自定义。小陈说：“原来不用图片也能做图标啊！”——其实CSS的强大之处就是“用代码创造视觉”，只要你懂一点伪元素和定位，就能画出很多简单的图标。

3种方法对比：选对方法比“瞎试”更重要

我把3种方法的优缺点整理成了表格，你可以直接对照选：

比如你是小白，直接选Iconfont；如果有设计师帮你做图，选自定义图片；如果是前端，想追求加载速度，选CSS绘制——没有“最好”的方法，只有“最适合你”的方法。

最后想跟你说：Flex Tree的样式调整，从来不是“为了好看而好看”——虚线是帮用户“省眼睛”，图标是帮用户“懂场景”。我去年帮朋友调完样式后，他们的用户反馈里最多的一句话是：“这个导航看起来‘很清楚’”——其实这就是样式的价值：让用户不用“思考”，就能找到想要的内容。

如果你按上面的方法调了Flex Tree的样式，不管是虚线还是图标，欢迎回来留个言——我上次帮小张调完，他说产品文档的用户停留时间涨了20%；帮小李调完，教育平台的课程点击量涨了15%；你也可以试试，说不定会有惊喜！

本文常见问题（FAQ）

Flex Tree加虚线后总是“断成一截一截”，怎么解决？

这是没理清Flex Tree的“层级逻辑”和伪元素定位导致的。首先Flex Tree核心是嵌套的

和
• ，每个层级
• 默认有padding-left（比如20px）缩进，要给
• 加position: relative，让伪元素（画虚线用的::before/::after）能以
• 为基准定位（设position: absolute）；其次伪元素的left（比如8px）加width（比如16px）要等于
• 的padding-left（8+16=24px），这样虚线会顺着层级缩进走，就不会断开了。

  我去年帮做产品文档的小张调样式时，一开始没算这个数值，虚线总错位，后来调整后瞬间对齐，用户看API列表时眼神能顺着虚线快速扫到内容，比之前省了3秒。

  用Iconfont替换Flex Tree图标，怎么让图标和文字“对齐不挤”？

  关键是调整Iconfont的font-size和margin-right。首先图标font-size要和文字大小匹配（比如文字14px，图标就设16px），避免图标太大或太小；然后加margin-right: 8px，让图标和文字之间留够间距，不会挤在一起；最后图标颜色要和文字颜色一致（比如#666），视觉上更协调。

  我帮教育平台的小李换“课程”图标时，就是这么调的，换完后用户说“图标和文字看着特别顺”，课程点击量都涨了15%。

  自定义图片替换Flex Tree图标，图片大小和格式怎么选？

  图片大小 选16x16px或20x20px，太大容易挤走文字，太小看不清；格式一定要用PNG，支持透明背景，避免JPG的白底破坏界面质感；如果有展开/折叠状态，要做两张图（比如open.png和close.png），用CSS的background-image切换状态。

  我帮文创店的小王换手绘图标时，用了16x16px的PNG图，透明背景，换完后后台导航像他们的产品一样有温度，用户反馈“这个后台看着就很‘文创’”。

  CSS绘制Flex Tree图标和用Iconfont，哪个更适合我？

  看你的基础和需求：如果是小白，直接选Iconfont——操作简单，只要复制类名就能用，图标库选择多；如果是前端，想追求加载速度，选CSS绘制——不用加载额外字体或图片，加载最快（我帮工具类网站的小陈调时，加载速度快了15%）；如果需要特殊风格（比如手绘），还是得用自定义图片。

  下来就是：小白选Iconfont，前端要速度选CSS，要风格选自定义图片，没有“最好”只有“最适合”。

  Flex Tree加虚线时，虚线颜色选什么才“舒服又清晰”？

  尽量选柔和的浅色调，比如#eee（浅灰）、#f0f0f0（浅白），或者项目主色的浅版（比如主色是#2f54eb，就用#e6ecff）；粗细一定选1px，太粗会把界面分割得太碎，太细又看不清。

  我之前帮科技类项目调虚线时，用了主色的浅色调，既符合品牌风格，又不会扎眼，用户反馈“顺着虚线找节点特别快，比原来的实线省劲多了”。

YUANLEISVIP

收藏 链接