Bug 描述
v3.2.0版本，底层节点会显示展开图标
路径：/src/components/TreeNode.vue

// v3.2.0版本
const expandCls = computed(() => {
      return [
        `${prefixCls}__square`,
        `${prefixCls}__expand`,
        {
          [`${prefixCls}__expand_active`]: props.data?.expand
        }
      ]
    })
// v3.1.0版本
const expandCls = computed(() => {
      return [
        `${prefixCls}__square`
        {
          [`${prefixCls}__expand_active`]: props.data?.expand
        }
      ]
    })

原因是$refs.treeRef 就不是RefImpl对象了，不需要.value，直接.titleField就好了

Bug 描述

组件版本

• Vue: 2.7.16
• @wsfe/vue-tree: 3.2.0

需要自己实现右键菜单，但是监听的鼠标右键单击事件获取不到事件对象，也就获取不到鼠标的坐标值

例如我要触发uncheck事件触发时，组件会先触发check事件，然后再触发uncheck事件，select和unselect同理
示例代码：

Bug 描述
typescript 总是 any，无法使用api定义

组件版本

• Vue: 2.7.16
• @wsfe/vue-tree: 3.2.0

问题描述
使用 setData 设置数据 (非响应式的方式，没有使用 :data 进行双向绑定)，怎么修改某个节点的数据例如 title，然后树上此节点马上更新看到效果呢？

需求来源，例如重命名树的节点。

组件版本

• Vue3
• @wsfe/vue-tree ^3.2.0

如题

组件内部使用的变量，在组件销毁后，还一直存在，导致应用占用内存一直很高

Bug 描述
某个节点下的数据太多时显示为空白，如图

复现步骤
请描述复现步骤，并且提供最小可复现示例（CodeSandbox, CodePen 链接等）

期望表现

实际表现
数据量太大时树的节点显示为空。

组件版本

• Vue: Vue 3.4
• @wsfe/vue-tree: ^3.2.0
• 其他可帮助复现的 npm 包名称及版本

额外信息
其他要补充的信息

问题描述
不能往一个子节点个数为0的父节点使用prepend或者append插入一个子节点？
源码里，似乎必须要有一个参考节点才可以插入， 但是父节点的子节点个数为0的情况下，是找不到参考节点的

组件版本

• Vue2
• @wsfe/ctree

当使用远程加载也就是懒加载的时候如何标识最后一层没有箭头

key-field 设置后 通过 setData方法设置数据，依然会提示数据主键重复。

我尝试设置cascade，然后递归setchecked把子孙勾选，但是会慢，怎么解决这个问题，你的父子关联的时候父勾选，子孙也勾选就不会卡，是怎么实现的，不是递归吗

只看到一个render属性，要求是一个function，但是vue不像react那样可以在函数中返回node节点。请问有具体的解决方案吗？

例如 <Vtree ref="tree" :load="loadNodes" :render="nodeRender" :renderNodeAmount="100"/>:

1. 节点使用动态加载，展开某个节点后 load 的函数中用 resolve([children]) 创建子节点。
2. 某个节点下有 10000 个节点，发现展开这个节点的时候，10000 个子节点都会生成 DOM，而不是生成 renderNodeAmount + bufferNodeAmount 节点，然后在滚动的时候动态生成 DOM 节点。
3. 发现这种情况下 <div class="ctree-tree__block-area"><div style="height: 0px"> 中 height 的值一直是 0px，而在线例子 https://wsfe.github.io/vue-tree/ 的 performance 里的这个节点的 height 会变化。

造成虚拟滚动不生效的会不会是动态加载的节点都不能使用虚拟滚动了？

如图所示，如果能高亮节点所在完整的行就好了。

处理大数据的时候使用vue-worker多线程进行处理，避免页面卡死

树节点可能会渲染比较复杂的DOM结构，通过slot放在template中会比 render 方法更加直观
参考element-plus的使用方式：

<VTree>
  <template #node={ node }>
    <div class="custom-node">{{ node.name }}</div>
  </template>
</VTree>

Bug 描述

vue 2.6.14下，v-model不生效

复现步骤

https://stackblitz.com/edit/vitejs-vite-z2qafx?file=src%2Fmain.js,src%2FTreeDemo.vue,package.json,index.html

可以将stackblitz下载到本地，不清楚为什么stackblitz上会报错，会检测成vue3

期望表现
v-model可以正常使用

实际表现
v-model不生效

组件版本

• Vue: 2.6.14
• @wsfe/vue-tree: 3.1.0

额外信息

直接使用modelValue是可以的，猜测是兼容性的问题？

<VTree
      :modelValue="value"
      selectable
      draggable
      :data="data"
      clearable
      drop-placeholder="请选择"
      :dropdown-min-width="30"
      dropdown-width-fixed
    >
      <template #empty>slot 传进来的暂无数据</template>
    </VTree>

Bug 描述

const foundCatalog = data.treeData.find(c => c.title === props.catalog);
if (foundCatalog) {
    setTimeout(() => {
        tree.value.scrollTo({ key: foundCatalog.id, verticalPosition: 'top' });
        console.log('scroll to ' + foundCatalog.id);
    }, 1000); // 担心树节点显示不完全，所以故意 1S 后才滚动。
}

复现步骤
请描述复现步骤，并且提供最小可复现示例（CodeSandbox, CodePen 链接等）

期望表现
把指定 ID 的节点滚动到顶部。

实际表现
没有滚动反应。

组件版本

• Vue: 3.3
• @wsfe/vue-tree: 3.1.0

IE11浏览器打开，堆栈溢出，不清楚是不是过多的函数调用引起的

如beforeDragMethod，返回true表示可拖动，false不可拖动
就像beforeDropMethod那样

如图，可指定线条样式，如实线，虚线等

右键菜单事件 node-right-click 的参数只有 node，没有 event 参数，这样在弹出右键菜单的时候就不能把右键菜单在鼠标点下的位置弹出。

./node_modules/@wsfe/vue-tree/dist/vue-tree.mjs 1302:13
Module parse failed: Unexpected token (1302:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
这个是啥原因啊

Bug 描述

vue 2.6.14下，使用VTreeDrop组件发生报错

复现步骤

https://stackblitz.com/edit/vitejs-vite-z2qafx?file=src%2Fmain.js,src%2FTreeDemo.vue,package.json,src%2FTreeDrop.vue

可以将stackblitz下载到本地，不清楚为什么stackblitz上会报错，会检测成vue3

期望表现

没有报错

实际表现

组件版本

• Vue: 2.6.14
• @wsfe/vue-tree: 3.1.0

额外信息

None

Vue2版本的控件功能API十分强大，因为在vue2的各大UI库中的树形控件都没有虚拟滚动的功能，这个组件完美解决了vue2在中后台大数据量树形控件的问题，感谢作者的开源！

使用下来基本业务需求都能涵盖，不过提两点可以优化的UI建议，仅针对于vue2，因为现在vue3的UI库树形控件基本都支持了大数据量以及一些常见的业务需求：

问题描述
1.增加展开/折叠的动画过渡效果
2.增加节点之间带连接线的树

组件版本

• Vue2 @wsfe/ctree

this.$refs.tree.setCheckedKeys 选中的key是我明确知道的。不应该再触发checked-change事件

官方在 2023 年 12 月 31 日 停止了 Vue2 的支持 ，不再有后续更新。

本树组件原本预想通过 vue-demi 库同时兼容 Vue2, Vue3 ，但自发布 @wsfe/vue-tree 3.x 以来，不时会收到一些 Vue2 兼容性相关的 issue ， Vue2, Vue3 的割裂带来的问题远比预想的多。

开这个 issue 有两个目的：

1. 调查用户使用的版本。请留下您目前正在使用的 Vue 版本与树组件版本，有以下三个选项：

• Vue2 & @wsfe/ctree
• Vue2 & @wsfe/vue-tree
• Vue3 & @wsfe/vue-tree

2. 讨论对 Vue2 的支持。是否要停止 @wsfe/vue-tree 对 Vue2 的支持，或者有其他同时支持 Vue2, Vue3 的方案。

右键菜单事件 node-right-click 的参数只有 node，没有 event 参数，这样在弹出右键菜单的时候就不能把右键菜单在鼠标点下的位置弹出。

使用 setData() 的方式设置树的数据 (使用非响应式):

1. 节点 node 当前是非叶子节点，其 node.isLeaf 为 false，有小三角形箭头。
2. 手动修改 node.isLeaf = true 把节点修改为叶子节点，节点的样式没有变，即小三角形箭头还在。
3. 调用树的方法 tree.value.clearChecked() 强制更新整棵树，这时 node 的小三角形箭头消失。

有没有更好的方法，只更新某个节点的样式？

就是树形节点，我只改变其中一个节点的状态，怎么触发试图更新，不影响其它节点，比如说展开状态、当前选中值等

1. import '@wsfe/vue-tree/style.css' css文件引入路径有误
2. 报错如图：
   

问题描述
使用 TS 的时候提示找不到定义，目前是在 shims.t.ds 中增加 declare module '@wsfe/vue-tree' 给忽略了。

Could not find a declaration file for module '@wsfe/vue-tree'. '/Users/biao/Documents/workspace/newdt/dsc-research/dsc-vue/node_modules/@wsfe/vue-tree/dist/v3/vue-tree.mjs' implicitly has an 'any' type.
  There are types at '/Users/biao/Documents/workspace/newdt/dsc-research/dsc-vue/node_modules/@wsfe/vue-tree/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@wsfe/vue-tree' library may need to update its package.json or typings.

组件版本
Vue3
@wsfe/vue-tree

可能的解决办法: 来自 ChatGPT

The error message you are seeing indicates that the module @wsfe/vue-tree does not have a declaration file (.d.ts) that specifies its types. As a result, TypeScript is unable to infer the types for the module, and it falls back to using the 'any' type by default.

To resolve this issue, you have a few possible options:

1. Install Type Declarations: Check if there are any available type declarations for the @wsfe/vue-tree package. You can search for them on DefinitelyTyped (https://definitelytyped.org/) or other community-driven TypeScript type declaration repositories. If you find the appropriate type declaration file, you can install it using npm or yarn:

   npm install @types/wsfe__vue-tree --save-dev
   

   or

   yarn add @types/wsfe__vue-tree --dev
   

2. Check for Updates: Ensure that you are using the latest version of the @wsfe/vue-tree package. Sometimes, package updates include improvements to their TypeScript type declarations.

3. Contact the Package Maintainer: If the package still lacks TypeScript type declarations despite being up to date, you can reach out to the maintainers of the @wsfe/vue-tree package and ask them to include TypeScript type declarations in their package.

4. Use TypeScript's any Type: If you are unable to find type declarations for the package and the maintainers have not provided them, you can use TypeScript's any type for the objects and variables related to the @wsfe/vue-tree module. However, this approach means that you won't be able to leverage TypeScript's static type checking for that specific module.

It's worth noting that option 1 (installing type declarations) is the most appropriate solution as it enables you to use TypeScript's type checking effectively and ensures better type safety in your codebase. However, if the type declarations are not available, you might have to resort to option 4 and use the any type, though this could result in potential issues due to the lack of type safety.

Bug 描述
tree.value.prepend 和 tree.value.append报错，TypeError: Cannot read properties of undefined (reading 'id')

我在ui上新建了一个node，然后再向这个node append或者prepend更多子node的时候，就报错了

似乎和这儿有关

https://github.com/wsfe/vue-tree/blob/26b2b5045d58432849fc0c22ccfcde402f440e28/src/store/tree-store.ts#L734C20-L734C28

这里的代码，当parentnode的children为空的时候，这里就会异常。