layui tree 自定义图标 2.5.6

layui是一款轻量级的前端UI框架，其中的tree组件提供了树形结构的展示和交互功能。在tree组件中，自定义图标是一种常见的需求，它可以根据用户的具体要求来设置图标样式和数量。

在layui tree中自定义图标的实现方式为，首先需要在节点数据中加入icon属性，该属性表示该节点图标的样式。如：{"id":1,"name":"节点1","icon":"layui-icon layui-icon-star"},其中的icon属性值为layui提供的图标样式类名。

当然，可以在icon属性值中加入自定义的图标样式，比如："icon":"my-icon",然后利用CSS来定义my-icon样式的图标。具体实现方式如下：

.layui-tree-my .my-icon:before {
content: '\e602';
font-family: "layui-icon";
font-size: 18px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 3px;
}

其中，layui-tree-my类是tree容器的class，my-icon是我们自定义的图标样式名，content属性中的'\e602'表示图标的Unicode码，可以通过查看layui的字体文件来获取相应图标的Unicode码。

最后，在tree组件的渲染时，设置自定义图标的样式，具体代码如下：

var treeData = [
//节点数据，包含icon属性
];

layui.use(['tree'], function() {
var tree = layui.tree;
tree.render({
elem: '#tree',
data: treeData,
indent: 20,
icon: ['-','-'],
click: function(node) {
console.log(node);
}
});

//设置自定义图标的样式
$('.layui-tree-my .layui-tree-icon').each(function() {
var icon = $(this).prev('.layui-tree-txt').find('.my-icon');
if (icon.length > 0) {
$(this).empty().append(icon);
}
});
});

其中，通过$('.layui-tree-my .layui-tree-icon')选择器获取所有需要设置图标的节点，然后通过操作DOM将自定义的图标样式添加到节点中。