Vuetify v-treeview - 如何以编程方式打开节点？答案

【问题标题】：Vuetify v-treeview - How to open programmatically a node?Vuetify v-treeview - 如何以编程方式打开节点？
【发布时间】：2020-03-31 16:44:35
【问题描述】：

在 Vuetify v-treeview 组件中重新加载数据后，我需要在特定节点中以编程方式打开树（我保存在内存中的最后一次打开）。

有可能吗？什么是正确的方法？

https://vuetifyjs.com/en/components/treeview/

感谢您的帮助。

更新

我已经解决了我的问题。我错了。

为了刷新数据，我使用了 loadData() 函数，该函数使用了 :loading 属性。

使用它，v-treeview 刷新失去当前打开状态的 dom。我创建了一个 updateData() 函数，它只重新加载 :items 属性。节点在相同状态下保持打开状态。

它工作正常，所以我不必以编程方式实现打开节点。

无论如何，我保留这个问题，因为分享一种方法（如果存在）在v-treeview 中以编程方式打开节点可能会很有用。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

你可以使用: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
  }
}

【讨论】：

【解决方案2】：

此解决方案允许在添加子节点后重新加载树视图（Vuetify 1.5）组件，而无需更改节点的打开/关闭状态。如果节点打开，我希望添加的子节点立即出现。

树视图组件

<v-treeview
  :items="yourItemList"
  :open.sync="openNodes"
  return-object
  @update:open="handleOpenOrClose"
  :key="triggerRerender"
>

类（使用“vue-property-decorator”）

当您在别处修改数据时，您还需要一些事件侦听器来增加 this.triggerRerender。

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 的新手，所以请告诉我任何改进！

【讨论】：