Layui-tree更改节点及右侧操作图标

原创于 2026-02-27 09:59:11 发布 · 264 阅读

1 ·

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

GEO检测

标签

#layui #前端 #javascript

更改图标均需修改Layui源码：layui.js

1. 更改节点图标

layui.js源码搜索：class="layui-icon layui-icon-file"，如图：
在这里插入图片描述
查找到之后，修改为 <i class="'+(i.icon || "layui-icon layui-icon-file")+'"> ，如图：

原理很简单，就是一个逻辑表达式，有传入的icon用传入的，没有的话用默认的。
修改完成后，即可在data中添加icon属性例如：

var data = [{
    name: '节点1',
    children: [{
        name: '节点1-1',
        icon: 'layui-icon layui-icon-layer'
    }]
}]

注意：此时showLine: true, // 是否开启连接线属性需要开启，否则还是默认的箭头图标。
我修改成文件夹的图标了，效果图：
在这里插入图片描述

2. 修改右侧操作图标

Layui 的 tree 组件节点默认支持的操作如下所示：
在这里插入图片描述如果有其他需求，例如弹窗查看节点的信息，或者不喜欢图标的icon怎么办呢？
layui.js源码搜索：data-type="del"，如图：

在数组内添加一项：

info: '<i class="layui-icon layui-icon-file" data-type="info"></i>'

如图：
在这里插入图片描述
修改完成保存后，修改：

// 渲染章节树
layui.use('tree', function () {
    let tree = layui.tree;
    vm.pointTree = tree.render({
        elem: '#pointTree',
        data: r.data,
        onlyIconControl: true,
        edit: ['info'],
        click: function (obj) {
            // 节点被点击
        },
        operate: function (obj) {
            let point = obj.data;
            if (obj.type === "info") {
                // 自定义图标被点击的回调函数
            }
        }
    });
});

效果图：
在这里插入图片描述