el-tree懒加载，每级渲染不同图标并且点击之后图标动态变化；实现局部层级刷新

我不是女神ヾ 2023-06-07 10:46 110阅读 0赞

效果图（每一层图标不同，并且打开和关闭状态的图标也不同） **------具体代码见最后------**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]

### 懒加载 ###

![在这里插入图片描述][20191014160438887.png]

### 渲染不同图标并且点击之后图标动态变化 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20191014161843377.png]

### 实现局部层级刷新 ###

注意：如果你想局部刷新第2级，应该在node.level=1的条件里面存储node和resolve变量，因为这个条件代表的意思是 “ 点击第1级 ， 渲染第2级 ”；同理，如果你想局部刷新第3级，那么就应该在node.level=2的条件里面存node和resolve变量![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][20191014162958754.png]

### 代码部分 ###

<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 (
 
  
 { node.label}
 
 )
 } else if (node.level == 2) { 
 return (
 
 
 { node.label}
 
 )
 }......以此类推 可继续写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级的打开和关闭的图标

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20230601/2d791f6666ca4e3ead6a28379df4fa25.png
[20191014160438887.png]: /images/20230601/1dd64ff5584842cca9c235ffb3ccc927.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 1]: /images/20230601/5a6b6348d67d4110b53f9ae967bbbdd8.png
[20191014161843377.png]: /images/20230601/9621a50ee4f84c45b217425d5f75609c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191014162720239.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw==,size_16,color_FFFFFF,t_70
[20191014162958754.png]: /images/20230601/fe15097ca36044329ce47b454e9efe3a.png