如何使用elementui中的树形组件在懒加载模式中会默认展开一层
如何使用elementui中的树形组件在懒加载模式中会默认展开一层
- elementui是饿了么开发的一款ui组件库,自从问世以来深受广大程序猿的喜爱.不过有时组件库不能满足正常的开发需求就需要我们来自己定制符合我们前端开发需求的组件
一、需求:1.用tree组件进行懒加载 2.默认会展开一层
将树形组件按照官网介绍引用,将树形组件的lazy树形设置为true即为懒加载模式,在懒加载模式中必须制定load属性,即组件渲染完毕之后渲染的方法,在load方法中指定初次渲染的数据
methods: {
loadTreeNodes(node,resolve){
if(node.level==0){//初次渲染
this.node=node;
//在data中记录当前node
resolve([{deptcode:0,label:'北京市',id:0}])
}else if(node.level<=2){
let param={};
Object.assign(param,{
id:node.data.id
})
posttree().then((res)=>{
setTimeout(()=>{
resolve(res.data.data.data)
},1000)
})
}else{
resolve([])
}
}
},
初次渲染时制定显示的内容,在初次渲染中记录初次渲染的node对象,通过点击数据的id值来判断当前点击的数据是哪一项,将当前项的id值传输至后台,此时应该是这种效果
文章图片
初次加载只有初次传输的数据,这时效果比较丑,有没有方法可以优化一下,即初级加载的时候可以展开一层
mounted () {
let nodedata = https://www.it610.com/article/this.node.childNodes[0];
nodedata.expanded = true;
nodedata.loadData();
},
【如何使用elementui中的树形组件在懒加载模式中会默认展开一层】在mounted中添加如上代码,此时就可以实现在懒加载的模式实现加载一层
文章图片
推荐阅读
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 由浅入深理解AOP
- 如何寻找情感问答App的分析切入点
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- java中如何实现重建二叉树