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

效果图(每一层图标不同,并且打开和关闭状态的图标也不同) ------具体代码见最后------
在这里插入图片描述

懒加载

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

实现局部层级刷新

注意:如果你想局部刷新第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>&nbsp;
                            <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,45,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,345,6...n级的打开和关闭的图标
发布了51 篇原创文章 · 获赞 8 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_44171757/article/details/102548804