首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >v-treeview -如何以编程方式打开节点?

v-treeview -如何以编程方式打开节点?
EN

Stack Overflow用户
提问于 2020-03-31 16:44:35
回答 2查看 8.1K关注 0票数 6

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

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

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

谢谢你的帮助。

更新

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

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

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

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

无论如何,我没有回答这个问题,因为共享一种方法(如果存在的话)在v-treeview中以编程方式打开节点可能很有用。

EN

回答 2

Stack Overflow用户

发布于 2020-05-05 14:03:28

你可以使用:open.sync。

代码语言:javascript
运行
复制
<v-treeview :items="yourItemsTree" :open.sync="openIds" hoverable>

现在,openIds是一个具有打开项(其项键)的数组(这两种方法都使用同步修饰符)。

或者,您可以使用

代码语言:javascript
运行
复制
<v-treeview :items="yourItemsTree" @update:open="onOpen" hoverable>

代码语言:javascript
运行
复制
methods: {
  onOpen(items) {
    this.openIds = items
  }
}
票数 5
EN

Stack Overflow用户

发布于 2021-08-19 19:01:39

此解决方案允许在添加子节点后重新加载treeview (Vuetify 1.5)组件,而不更改节点的打开/关闭状态。如果节点打开,我希望添加的子节点立即出现。

Treeview组件

代码语言:javascript
运行
复制
<v-treeview
  :items="yourItemList"
  :open.sync="openNodes"
  return-object
  @update:open="handleOpenOrClose"
  :key="triggerRerender"
>

类(使用"vue-property-decorator")

  • 您还需要一些事件侦听器来在其他地方修改数据时增加this.triggerRerender。

代码语言:javascript
运行
复制
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的新手,所以请告诉我任何改进!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60955640

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档