1、安装 vue-giant-tree

npm i vue-giant-tree --save

2、在需要ztree树的页面引入

import tree from “vue-giant-tree”;

3、注册ztree

components: { 　　tree },

4、配置

<tree:setting="setting":nodes="getTreeData"@onClick="selectTree"@onCreated="handleCreated"
/>

data里面写：

setting: {check: {enable: false,},view: {// 开启图标显示功能showIcon: true,expandSpeed: 500},data: {key:{name:"label",},simpleData: {//是否使用简单数据模式enable: true,//树节点id，一般是后台数据库主键idKey: "value",//父级idpIdKey: "parentId",rootPId: "0",},},//ztree回调函数callback: {//树选择事件onClick:this.selectTree, //写选择树时的方法onExpand: this.zTreeOnExpand, //延展树后方法beforeExpand: this.zTreeBeforeExpand, //延展树前方法},},ztreeObj:null,getTreeData:[],

写方法：

handleCreated(ztreeObj) {console.log("加载树完成");this.ztreeObj = ztreeObj;// let firstTree = ztreeObj.getNodes()[0];// 默认选中第一个// ztreeObj.selectNode(firstTree);// 设置节点全部展开// ztreeObj.expandAll(true);//加载完自动点击第一个，加载右边表格// this.setting.callback.onClick(null, firstTree.id, firstTree)if(this.formItem.term_code!=undefined){let node=this.ztreeObj.getNodeByParam('id',this.id)this.ztreeObj.selectNode(node,true);}//根据id进行自动滚动定位，需要在创建tree时候进行},
selectTree(evt, treeId, treeNode) {//如果要使用节点方法，比如增加节点，可以直接使用创建tree时定义的this.ztreeObjif(treeNode.isParent == false){var selectedNode = this.ztreeObj.getSelectedNodes();this.ztreeObj.addNodes(selectedNode[0], add);}
}

5、官方tree文档：

https://treejs.cn/v3/api.php

ztree在vue中的使用使用封装好的vue-giant-tree相关推荐

vue中js文件里获取this（vue实例）
vue中js文件里获取this(vue实例) 1,在main.js中抛出vue实例,在需要用到的地方引入即可 main.js里let vueThis= new Vue({el: '#app',rout ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
关于Vue中$nextTick的作用及实现原理(Vue进阶)
Hello,大家好,最近找工作的路途依然艰难,但是要一直保持对技术的热爱!今天继续跟大家探索一下Vue进阶的内容,这次研究一下Vue的全局API中的$nextTick,这是一个很常用,也是经典的API ...
vue中开发多语言（国际化）,vue+i18n（详细教程）
目录第一步: 第二步: 第三步: 第四步: 最后: 前言:我们有时候会遇到一个项目需要支持多语言,而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需 ...
vue中tab切换前端实现_使用vue实现tab操作
tab功能在网页中是比较常见的,那么用vue怎么实现tab操作呢,与jQuery实现tab的思路有什么区别呢? 在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的i ...
vue中axios请求的封装
axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以 ...
vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...
1.背景常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
vue中请求接口怎么封装公共地址_vue请求接口的封装
import api from './api'; import request from'./request';//获取url上的rest参数,返回参数列表 /{userId}/{roleId} =& ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...

ztree在vue中的使用使用封装好的vue-giant-tree

1、安装 vue-giant-tree

2、在需要ztree树的页面引入

3、注册ztree

4、配置

5、官方tree文档：

ztree在vue中的使用使用封装好的vue-giant-tree相关推荐

最新文章

热门文章

ztree在vue中的使用 使用封装好的vue-giant-tree

1、安装 vue-giant-tree

2、在需要ztree树的页面引入

3、注册ztree

4、配置

5、官方tree文档：

ztree在vue中的使用 使用封装好的vue-giant-tree相关推荐

最新文章

热门文章

ztree在vue中的使用使用封装好的vue-giant-tree

ztree在vue中的使用使用封装好的vue-giant-tree相关推荐