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") {
// 自定义图标被点击的回调函数
}
}
});
});
就可以愉快使用啦~