layui tree组件更改图标

最新推荐文章于 2026-02-27 09:59:11 发布

原创最新推荐文章于 2026-02-27 09:59:11 发布 · 3.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html5 #layui

收录于

本文介绍如何在layui框架中实现树形菜单图标的自定义功能，包括更改源码以支持图标动态显示的方法，以及如何通过传值来指定不同节点的图标样式。

文章目录

更改源码
更换代码
传值

更改源码

找到 tree.js ，找到

<i class="layui-icon layui-icon-file"></i>

更换代码

把 class 里面的

layui-icon layui-icon-file

更改为

' + (r.icon || "layui-icon layui-icon-file") + '

更改前：

 <i class="layui-icon layui-icon-file"></i>

更改后：

 <i class="' + (r.icon || "layui-icon layui-icon-file") + '"></i>

传值

//在 tree.render 里面传值
layuiTree.render({
    elem: '#classifiedTree',  //绑定元素
    id:'checkBox',
    icon:'fa fa-table',//此为传入的图标class值
    data: nodes,//返回的数据
    showCheckbox: false,
    accordion: true,//手风琴
})