vue-giant-tree：基于ztree封装的 Vue 树形组件，轻松实现海量数据的高性能渲染

itdhp

已于 2023-10-28 18:51:25 修改

阅读量1.2k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-10-28 18:14:08 首次发布

本文链接：https://blog.csdn.net/dhp1994/article/details/134094380

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

github仓库

安装

npm i vue-giant-tree --save

注意：组件依赖 jQuery，务必在页面中提前加载 jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

使用

<template>
  <tree
    :nodes="nodes"
    @onClick="onClick"
    @onCheck="onCheck"
    @onCreated="handleCreated"
  />
</template>

<script>
  import tree from "vue-giant-tree";
  export default {
    components: { tree },
    data() {
      return {
        nodes: [
          { id:1, pid:0, name:"随意勾选 1", open:true},
          { id:11, pid:1, name:"随意勾选 1-1", open:true},
          { id:111, pid:11, name:"随意勾选 1-1-1"},
          { id:112, pid:11, name:"随意勾选 1-1-2"},
          { id:12, pid:1, name:"随意勾选 1-2", open:true},
          { id:121, pid:12, name:"随意勾选 1-2-1"},
          { id:122, pid:12, name:"随意勾选 1-2-2"},
          { id:2, pid:0, name:"随意勾选 2", checked:true, open:true},
          { id:21, pid:2, name:"随意勾选 2-1"},
          { id:22, pid:2, name:"随意勾选 2-2", open:true},
          { id:221, pid:22, name:"随意勾选 2-2-1", checked:true},
          { id:222, pid:22, name:"随意勾选 2-2-2"},
          { id:23, pid:2, name:"随意勾选 2-3"}
        ]
      }
    },
    methods: {
      onClick(evt, treeId, treeNode) {

      },
      onCheck(evt, treeId, treeNode) {

      },
      handleCreated(ztreeObj) {

      }
    }
    ...
  }
</script>

属性

参数	说明	类型	默认值
setting	ztree 配置	Object	`{view: {showIcon: false}}`
nodes	ztree 数据	Array	`[]`

事件

完全移植zTree API中callback支持的事件，除了：

不支持所有 before 开头的事件。这类事件的主要作用是根据返回值决定是否阻止后续的on事件，这种判断可以在on事件中实现；当然，你也可以通过setting.callback.beforeXXX自行配置
不支持 onNodeCreated 事件。因为在大数据量下很耗性能，如果需要可以通过 setting.callback.onNodeCreated 自行传入
增加 onCreated 事件。每次实例初始化完成时触发，回调参数接收 ztree 实例，通过 ztree 实例可以使用所有实例方法

事件名称	说明
onAsyncError	参考 zTree API
onAsyncSuccess	参考 zTree API
onCheck	参考 zTree API
onClick	参考 zTree API
onCollapse	参考 zTree API
onDblClick	参考 zTree API
onDrag	参考 zTree API
onDragMove	参考 zTree API
onDrop	参考 zTree API
onExpand	参考 zTree API
onMouseDown	参考 zTree API
onMouseUp	参考 zTree API
onRemove	参考 zTree API
onRename	参考 zTree API
onRightClick	参考 zTree API
onCreated	初始化渲染完成后触发，回调参数接收 ztree 实例