效果图(每一层图标不同,并且打开和关闭状态的图标也不同) ------具体代码见最后------
懒加载
渲染不同图标并且点击之后图标动态变化
实现局部层级刷新
注意:如果你想局部刷新第2级,应该在node.level=1的条件里面存储node和resolve变量,因为这个条件代表的意思是 “ 点击第1级 , 渲染第2级 ”;同理,如果你想局部刷新第3级,那么就应该在node.level=2的条件里面存node和resolve变量
代码部分
<el-tree
accordion //同级只打开一个
highlight-current
:load="loadChildrenNode" //懒加载逻辑代码function
lazy //懒加载
:render-content="renderContent" //自定义节点显示的文字和图标
:props="defaultProps">
</el-tree>
data(){
return{
defaultProps: {
children: 'children',
label: 'yhmc',
isLeaf: 'leaf'
}
}
}
methods:{
loadChildrenNode(node,resolve){//懒加载具体逻辑代码
if (node.level === 0) { //渲染第1级
resolve([
{
yhmc: '待调查抄表本/用户目录',
disabled: true,
}
]);
}
if(node.level === 1){//点击第1级,渲染第2级
this.node = node
this.resolve = resolve
yhJbxx_getYdhhByBaseInfo('请求后台接口获取要渲染的数据’).then(res => {//110011
resolve(res.content)
})
}
if(node.level >=2){//点击第2级及其以上
for (var i in node.data.children) {
node.data.children[i].yhmc=node.data.children[i].name
if(node.data.children[i].children.length==0){//如果下级没有数据,则此级为叶子节点
node.data.children[i].leaf=true
}
}
resolve(node.data.children)
}
},
renderContent(h, {node, data, store}){//自定义节点显示的文字和图标
if (node.level==1){
return (
<span class="treeNode">
<i class="levelIcon level1-icon"></i>
<span>{node.label}</span>
</span>
)
} else if (node.level == 2) {
return (
<span class="treeNode">
<i class="levelIcon level2-icon"></i>
<span>{node.label}</span>
</span>
)
}......以此类推 可继续写3,4,5,6...n层
}
}
.el-tree .expanded.el-icon-caret-right ~ span i.level1-icon{ //第1级目录打开的图标
background-image: url('../../../../assets/cbhs/level1Icon.png');
background-position: 0px 0px;
}
.el-tree .el-icon-caret-right ~ span i.level1-icon{ //第1级目录关闭的图标
background-image: url('../../../../assets/cbhs/level1Icon.png');
background-position: 16px 16px;
}
...以此类推设置2,3,4,5,6...n级的打开和关闭的图标