天天看点

关于在Vue中使用ZTree

在大数据量场景下Vue的数据监听机制决定了让渲染性能被降低,基于Vue实现的常规树组件几乎无法胜任上万条数据的高性能渲染,在IE浏览器(即便是IE11)中很容易导致页面卡死在,这个领域ztree是当之无愧最成熟的方案。

有前辈使用了vue-giant-tree组件对Ztree进行了vue的封装,但是因为没有全部将ztree的接口暴露出,无奈还是得使用原生ZTree,本来我是用npm去装ztree的 后来发现,很多东西直接上手改源码会更快,尤其是当我想借用ztree的fuzzySearch的时候,于是我用了个笨方法,我把ztree当作静态JS拿进来直接用了,当然,这种做法未必可取。

先来看一下我的结构树

关于在Vue中使用ZTree

 其中Ztree.vue就是我使用的组件,本来我是想写出slot形式的,但是考虑到后面的内置方法,我又放弃了,哈哈,先这么记着吧,后面可能就改掉了

代码如下

然后如果你要该式样,就去

关于在Vue中使用ZTree

这里改他的原生的就行了,他的树结构点击+-号的变换是通过一整张图片,调整他的位置实现的

关于在Vue中使用ZTree

可以自己去改成想要的

然后css一定要在main.js中就要引入

关于在Vue中使用ZTree

 要不式样全部就没了

然后是Ztree的查询功能

关于在Vue中使用ZTree
关于在Vue中使用ZTree
关于在Vue中使用ZTree

继续阅读