wsfe / vue-tree Goto Github PK

View Code? Open in Web Editor NEW

145.0 145.0 29.0 1.88 MB

使用虚拟列表优化的 Vue 树组件

License: MIT License

JavaScript 1.42% Vue 45.01% TypeScript 44.39% HTML 0.33% Less 8.85%

select tree-select virtual virtual-tree vue vue-tree vue2 vue3

vue-tree's People

Contributors

Stargazers

Watchers

vue-tree's Issues

报错无法使用

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

右键菜单事件没有 event 参数

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

scrollTo 不生效

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

check和uncheck事件触发时，会先触发check事件

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

不能往一个子节点个数为0的父节点使用prepend或者append插入一个子节点

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

组件版本

Vue2
@wsfe/ctree

使用 TS 的时候提示找不到定义

问题描述
使用 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:

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
```
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.
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.
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.

TreeDrop单选时报错

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

vue2下v-model不生效

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>

关于 @wsfe/vue-tree 对 Vue2 支持的讨论

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

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

开这个 issue 有两个目的：

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

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

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

求助

./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
这个是啥原因啊

vue-cli新创建的项目咋集成不进来呢

如题

怎么只更新某一个节点的样式？

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

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

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

期望表现

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

组件版本

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

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

v3.2.0版本，底层节点会显示展开图标

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
        }
      ]
    })

Vue: 2.7.16
@wsfe/vue-tree: 3.2.0

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

似乎和这儿有关

vue-tree/src/store/tree-store.ts

Line 710 in 26b2b50

parentNode.children[childrenLength - 1][this.options.keyField]

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

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

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

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