vue+element tree懒加载更新数据
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
使用element tree实现懒加载,更新某一节点的数据
1.tree 懒加载
只需要在el-tree标签上面添加lazy,load属性,load的接收是一个函数。这里贴上官网给出的方法
<el-tree
:data="treeList"
ref="tree"
class="vue-tree"
lazy
:load="loadNode"
:highlight-current="true"
:node-key="nodeKey"
@node-click="nodeClick"
:expand-on-click-node="false"
:props="defaultProps"
></el-tree>
2.load方法使用
// 懒加载获取树形结构
loadNode(node, resolve) {
//调用接口时,我们的需求是第一级传参为0,后面为当前节点的唯一表示id,可以根据需求而定
// node.level为0时,就是tree的第一级
const spaceParentGuid = node.level === 0 ? 0 : node.data.spaceGuid
getDeviceLazyTree({ spaceParentGuid }).then(({ data }) => {
resolve(
data.data.map(item => {
return {
...item,
leaf: !item.hasChildren // 此参数用来判断当前节点是否为叶子节点
}
})
)
})
},
3.leaf的作用
当我们使用的tree懒加载,只会加载到我们请求的那一层级,所以当我们在叶子节点请求时,请求完不会出现数据,这样的体验就不是很好,这个时候就需要借助tree的props里面isLeaf的配置方法了
defaultProps: {
children: 'children',
label: 'spaceName',
isLeaf: 'leaf'
}
加上此字段,就可以清晰的看出哪些节点为叶子节点了
4.我们一旦使用懒加载的方式的话,那我们在对tree接口进行增删改查时,及时刷新数据时,就会造成我们还需要从新获取接口
其实如果我们仔细观察的话,我们会发现已经请求过的节点,我们收起,再次打开是不会请求接口的,这样的话,我们可以这么做
/**
* 单独刷新节点
* guid: 当前节点的父级唯一标识节点
*/
refreshTreeNode(guid) {
let node = this.$refs.tree.getNode(guid)
if (node) {
node.loaded = false
node.expand() // 主动调用展开节点方法,重新查询该节点下的所有子节点
}
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)