ivu-tree重新加载树节点并显示勾选树的节点
时间: 2024-05-15 14:18:44 浏览: 92
要实现ivu-tree重新加载树节点并显示勾选树的节点,可以采用以下步骤:
1. 在ivu-tree中设置ref属性,例如设置为treeRef。
2. 在重新加载树节点的函数中,先获取当前选中的节点,可以通过treeRef.getSelectedNodes()方法获取。
3. 重新加载树节点,可以通过treeRef.loadData()方法实现,该方法需要传入新的节点数据。
4. 遍历之前选中的节点,将其重新勾选上,可以通过treeRef.setCheckedKeys()方法实现,该方法需要传入一个数组,数组中包含之前选中节点的key值。
示例代码如下:
```
<template>
<div>
<i-tree ref="treeRef" :data="treeData" :checkable="true"></i-tree>
<i-button type="primary" @click="reloadTree">重新加载</i-button>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
title: '节点1',
key: '1',
children: [
{
title: '节点1-1',
key: '1-1'
},
{
title: '节点1-2',
key: '1-2'
}
]
},
{
title: '节点2',
key: '2',
children: [
{
title: '节点2-1',
key: '2-1'
},
{
title: '节点2-2',
key: '2-2'
}
]
}
],
checkedKeys: []
}
},
methods: {
reloadTree() {
// 获取当前选中的节点
const selectedNodes = this.$refs.treeRef.getSelectedNodes()
// 重新加载树节点
this.treeData = [
{
title: '节点3',
key: '3',
children: [
{
title: '节点3-1',
key: '3-1'
},
{
title: '节点3-2',
key: '3-2'
}
]
}
]
// 遍历之前选中的节点,将其重新勾选上
const checkedKeys = []
selectedNodes.forEach(node => {
checkedKeys.push(node.key)
})
this.$refs.treeRef.setCheckedKeys(checkedKeys)
}
}
}
</script>
```
阅读全文