在大数据量场景下Vue的数据监听机制决定了让渲染性能被降低,基于Vue实现的常规树组件几乎无法胜任上万条数据的高性能渲染,在IE浏览器(即便是IE11)中很容易导致页面卡死在,这个领域ztree是当之无愧最成熟的方案。
有前辈使用了vue-giant-tree组件对Ztree进行了vue的封装,但是因为没有全部将ztree的接口暴露出,无奈还是得使用原生ZTree,本来我是用npm去装ztree的 后来发现,很多东西直接上手改源码会更快,尤其是当我想借用ztree的fuzzySearch的时候,于是我用了个笨方法,我把ztree当作静态JS拿进来直接用了,当然,这种做法未必可取。
先来看一下我的结构树

其中Ztree.vue就是我使用的组件,本来我是想写出slot形式的,但是考虑到后面的内置方法,我又放弃了,哈哈,先这么记着吧,后面可能就改掉了
代码如下
然后如果你要该式样,就去
这里改他的原生的就行了,他的树结构点击+-号的变换是通过一整张图片,调整他的位置实现的
可以自己去改成想要的
然后css一定要在main.js中就要引入
要不式样全部就没了
然后是Ztree的查询功能