wsfe / vue-tree Goto Github PK
View Code? Open in Web Editor NEW使用虚拟列表优化的 Vue 树组件 Vue tree component optimized using virtual list
Home Page: https://wsfe.github.io/vue-tree/
License: MIT License
使用虚拟列表优化的 Vue 树组件 Vue tree component optimized using virtual list
Home Page: https://wsfe.github.io/vue-tree/
License: MIT License
Bug 描述
vue 2.6.14
下,使用VTreeDrop
组件发生报错
复现步骤
可以将stackblitz下载到本地,不清楚为什么stackblitz上会报错,会检测成vue3
期望表现
没有报错
组件版本
额外信息
None
Bug 描述
显示连接线时如果是虚线能否添加修改虚线点位的密集度
复现步骤
我们现在需要显示虚线但是虚线是那种很密集的虚线能否提供参数修改
期望表现
实际表现
组件版本
额外信息
其他要补充的信息
如beforeDragMethod,返回true表示可拖动,false不可拖动
就像beforeDropMethod那样
官方在 2023 年 12 月 31 日 停止了 Vue2 的支持 ,不再有后续更新。
本树组件原本预想通过 vue-demi
库同时兼容 Vue2, Vue3 ,但自发布 @wsfe/vue-tree 3.x 以来,不时会收到一些 Vue2 兼容性相关的 issue , Vue2, Vue3 的割裂带来的问题远比预想的多。
开这个 issue 有两个目的:
@wsfe/vue-tree
对 Vue2 的支持,或者有其他同时支持 Vue2, Vue3 的方案。就是树形节点,我只改变其中一个节点的状态,怎么触发试图更新,不影响其它节点,比如说展开状态、当前选中值等
问题描述
使用 setData 设置数据 (非响应式的方式,没有使用 :data 进行双向绑定),怎么修改某个节点的数据例如 title,然后树上此节点马上更新看到效果呢?
需求来源,例如重命名树的节点。
组件版本
./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
这个是啥原因啊
Vue2版本的控件功能API十分强大,因为在vue2的各大UI库中的树形控件都没有虚拟滚动的功能,这个组件完美解决了vue2在中后台大数据量树形控件的问题,感谢作者的开源!
使用下来基本业务需求都能涵盖,不过提两点可以优化的UI建议,仅针对于vue2,因为现在vue3的UI库树形控件基本都支持了大数据量以及一些常见的业务需求:
问题描述
1.增加展开/折叠的动画过渡效果
2.增加节点之间带连接线的树
组件版本
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 的节点滚动到顶部。
实际表现
没有滚动反应。
组件版本
问题描述
现在想要更新某个节点,执行的是remove旧节点,prepend新节点。
期待推出更新某个或者多个节点的方法。
组件版本
暂定用 vitepress 重写一下文档站
处理大数据的时候使用vue-worker多线程进行处理,避免页面卡死
this.$refs.tree.setCheckedKeys 选中的key是我明确知道的。不应该再触发checked-change事件
当使用远程加载也就是懒加载的时候如何标识最后一层没有箭头
使用 setData()
的方式设置树的数据 (使用非响应式):
node.isLeaf
为 false,有小三角形箭头。node.isLeaf = true
把节点修改为叶子节点,节点的样式没有变,即小三角形箭头还在。tree.value.clearChecked()
强制更新整棵树,这时 node 的小三角形箭头消失。有没有更好的方法,只更新某个节点的样式?
Bug 描述
tree.value.prepend 和 tree.value.append报错,TypeError: Cannot read properties of undefined (reading 'id')
我在ui上新建了一个node,然后再向这个node append或者prepend更多子node的时候,就报错了
似乎和这儿有关
vue-tree/src/store/tree-store.ts
Line 710 in 26b2b50
这里的代码,当parentnode的children为空的时候,这里就会异常。
右键菜单事件 node-right-click 的参数只有 node,没有 event 参数,这样在弹出右键菜单的时候就不能把右键菜单在鼠标点下的位置弹出。
问题描述
手机上很难滑动树,希望能优化
组件版本
例如 <Vtree ref="tree" :load="loadNodes" :render="nodeRender" :renderNodeAmount="100"/>
:
renderNodeAmount + bufferNodeAmount
节点,然后在滚动的时候动态生成 DOM 节点。<div class="ctree-tree__block-area"><div style="height: 0px">
中 height 的值一直是 0px
,而在线例子 https://wsfe.github.io/vue-tree/ 的 performance 里的这个节点的 height 会变化。造成虚拟滚动不生效的会不会是动态加载的节点都不能使用虚拟滚动了?
右键菜单事件 node-right-click 的参数只有 node,没有 event 参数,这样在弹出右键菜单的时候就不能把右键菜单在鼠标点下的位置弹出。
问题描述
使用 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.
IE11浏览器打开,堆栈溢出,不清楚是不是过多的函数调用引起的
树节点可能会渲染比较复杂的DOM结构,通过slot
放在template
中会比 render
方法更加直观
参考element-plus的使用方式:
<VTree>
<template #node={ node }>
<div class="custom-node">{{ node.name }}</div>
</template>
</VTree>
需要自己实现右键菜单,但是监听的鼠标右键单击事件获取不到事件对象,也就获取不到鼠标的坐标值
例如我要触发uncheck事件触发时,组件会先触发check事件,然后再触发uncheck事件,select和unselect同理
示例代码:
我尝试设置cascade,然后递归setchecked把子孙勾选,但是会慢,怎么解决这个问题,你的父子关联的时候父勾选,子孙也勾选就不会卡,是怎么实现的,不是递归吗
如题
问题描述
能否增加清空某个节点的函数。
要清空某个节点,目前使用已经提供的 API treeRef.value. remove(nodeId)
在 for 循环里逐个删除,数据量小的时候问题不大,数据量几万后界面会卡住几十秒。
目前暂时的解决办法是把要清空的节点从它的 parent 里删除,然后重建一个同样的节点。
组件版本
组件内部使用的变量,在组件销毁后,还一直存在,导致应用占用内存一直很高
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
}
]
})
Bug 描述
vue 2.6.14
下,v-model
不生效
复现步骤
可以将stackblitz下载到本地,不清楚为什么stackblitz上会报错,会检测成vue3
期望表现
v-model
可以正常使用
实际表现
v-model
不生效
组件版本
额外信息
直接使用modelValue是可以的,猜测是兼容性的问题?
<VTree
:modelValue="value"
selectable
draggable
:data="data"
clearable
drop-placeholder="请选择"
:dropdown-min-width="30"
dropdown-width-fixed
>
<template #empty>slot 传进来的暂无数据</template>
</VTree>
key-field 设置后 通过 setData方法设置数据,依然会提示数据主键重复。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.