在Vuetify v-treeview
组件中重新加载数据之后,我需要以编程的方式在特定的节点中打开树(最后一次打开是我保存在内存中的)。
有可能吗?什么是正确的方法?
https://vuetifyjs.com/en/components/treeview/
谢谢你的帮助。
更新
我解决了我的问题。我错了。
为了刷新数据,我使用了使用loadData()
属性的:loading
函数。
使用它,v-treeview
刷新丢失当前打开状态的dom。我已经创建了一个只重新加载updateData()
属性的:items
函数。节点在相同的状态下保持打开状态。
它工作正常,所以我不必以编程方式实现开始节点。
无论如何,我没有回答这个问题,因为共享一种方法(如果存在的话)在v-treeview
中以编程方式打开节点可能很有用。
发布于 2020-05-05 14:03:28
你可以使用:open.sync。
<v-treeview :items="yourItemsTree" :open.sync="openIds" hoverable>
现在,openIds是一个具有打开项(其项键)的数组(这两种方法都使用同步修饰符)。
或者,您可以使用
<v-treeview :items="yourItemsTree" @update:open="onOpen" hoverable>
和
methods: {
onOpen(items) {
this.openIds = items
}
}
发布于 2021-08-19 19:01:39
此解决方案允许在添加子节点后重新加载treeview (Vuetify 1.5)组件,而不更改节点的打开/关闭状态。如果节点打开,我希望添加的子节点立即出现。
Treeview组件
<v-treeview
:items="yourItemList"
:open.sync="openNodes"
return-object
@update:open="handleOpenOrClose"
:key="triggerRerender"
>
类(使用"vue-property-decorator")
export default class TreeViewClass extends Vue {
@Prop({ type: Array, default: () => [] }) public yourItemList!: any[];
public triggerRerender = 0; // modifying this value will rerender the component.
public openNodes = [] as any[];
private actuallyOpenNodes = [] as any[];
private rerenderCount = 0; // after rerendering, increment this to track if closing a node is due to close action or rerender.
public handleOpenOrClose(openNodesArray: any[]): void {
if (openNodesArray.length === 0) {
if (this.rerenderCount === this.triggerRerender) {
this.handleClose()
} else {
// This is so it doesn't close nodes on rerender.
this.rerenderCount = this.triggerRerender;
}
} else if (openNodesArray.length < this.actuallyOpenNodes.length) {
this.handleClose()
} else {
this.handleOpen(openNodesArray)
}
}
public handleOpen(openNodesArray: any[]): void {
openNodes.forEach(node => {
if (this.actuallyOpenNodes.indexOf(node) === -1) {
this.actuallyOpenNodes.push(node);
}
});
}
public handleClose(): void {
this.actuallyOpenNodes.forEach((node, index) => {
if (this.openNodes.indexOf(node) === -1) {
this.actuallyOpenNodes.splice(index, 1);
}
});
}
public updated(): void {
if (this.openNodes.length !== this.actuallyOpenNodes.length) {
this.actuallyOpenNodes.forEach(node => {
if (this.openNodes.indexOf(node) === -1) {
this.openNodes.push(node);
}
});
}
}
}
我是TypeScript,Vue和Vuetify的新手,所以请告诉我任何改进!
https://stackoverflow.com/questions/60955640
复制相似问题