自定义Layui Tree的节点的操作图标

Layui 的 tree 组件 节点默认支持的操作如下所示：

如果有其他需求，例如弹窗查看节点的信息，或者不喜欢图标的icon怎么办呢？

这时就需要通过修改源码的方式来实现了。

打开layui.js，搜索 data-type="del"

红框内就是支持的的操作，其中info是我自己添加的，使用layui-icon-file作为显示的图标

再搜索：layui-icon-edit

找到这行代码：

l = ['<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>', '<div class="layui-inline" lay-event="update"><i class="layui-icon layui-icon-edit"></i></div>', '<div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>'].join(""),

在数组内添加一项：

'<div class="layui-inline" lay-event="info"><i class="layui-icon layui-icon-tips"></i></div>'

这时候保存layui.js

打开使用tree的地方，

// 渲染章节树
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") {
                // 自定义图标被点击的回调函数
            }
        }
    });
});

就可以愉快使用啦~