vue对vue-giant-tree进行节点操作

vue 项目中使用到了vue-giant-tree这个使用ztree封装的树形插件，在对其节点进行操作时遇到了无法向传统的jquery那样获取到ztreeObj；而导致了无法控制节点dom；浪费了许多时间，so特此记录一哈

Vue-Giant-Tree

Vue-Giant-Tree是最ztree的一个封装；用于vue 项目中，该ztree的好处就是不需要自己将数据拼装为树形结构。只需要给他一个带有子父级关系的数组即可；这就大大减少了拼装数据的麻烦（直接从数据库查询出来就可以使用）

如：


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"}]

一、项目需求

根据数据类型隐藏节点

根据ztee官网http://www.treejs.cn/v3/api.php提示根据如下hideNode()方法可以隐藏节点

但在进行封装的vue-giant-tree中不能使用如下方法

var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getNodes();
treeObj.hideNode(nodes[0]);

二、使用ref获取dom

于是想到了使用ref


<template>
<tree :nodes="nodes" :setting="setting" @onClick="onClick" @onCheck="onCheck"  ref='ztreeDom'/>
</template>
//js
methods:{setNodeVisible(){let treeDom = this.$refs.ztreeDom;console.log(treeDom);}}

打印如下图

的确可以根据dom找到ztreeObj；但是根本无法使用treeDom.ztreeObj操作节点


let ztreeObj = treeDom.ztreeObj;
let treeNodes = ztreeObj .getNodes();
console.log(treeNodes); // []
ztreeObj.removeNode(treeNodes[0]);

从上的console得知无法获取子节点，那么自然这个操作是失败的了

三、使用handleCreated方法

最后从作者的 App.vue 中找到了@onCreated="handleCreated" 方法；
于是修改组件绑定

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

使用handleCreated缓存ztreeObj

methods: {handleCreated: function(ztreeObj) {this.ztreeObj = ztreeObj;},}

这样就可以对节点进行操作了。

下面是记录使用的完整步骤

四、使用的完整步骤

4.1 package.json引入依赖

"dependencies": {"vue-giant-tree": "^0.1.1"},

4.2 组件绑定


<template><div class="nav-siderbar"><tree :nodes="nodes" :setting="setting" @onClick="onClick" @onCheck="onCheck"  @onCreated="handleCreated"/></div>
</template>
<script>import tree from "vue-giant-tree";import axios from 'axios';export default {name: 'map-demo',components: {tree},data() {return {ztreeObj: null,setting: {check: {enable: true},data: {simpleData: {enable: true,idKey: "id",pIdKey: "pid",rootPId: "0"}}},nodes: [],}},methods: {handleCreated: function(ztreeObj) {this.ztreeObj = ztreeObj;// onCreated 中操作ztreeObj对象展开第一个节点ztreeObj.expandNode(ztreeObj.getNodes()[0], true);let ztreeNodes = ztreeObj.getNodes()[0].children;ztreeNodes.find(treeNode => {if(treeNode.type == "***"){ztreeObj.setChkDisabled(treeNode,true);};});ztreeObj.setChkDisabled(ztreeObj.getNodes()[0],true);},getTree(val) {axios.post('http://127.0.0.1:8081', {}, {headers: {'Content-Type': 'application/json'}}).then(response => {this.nodes = response.data;}, err => {console.log(err)})},// 点击事件onClick: function(evt, treeId, treeNode) {if(treeNode.type){if(treeNode.type == "***" ){return;};}},// 选中事件onCheck: function(evt, treeId, treeNode) {// 获取数据treeNode根据checked 是否为true判断是否选中if(treeNode.checked){}else{}},}}
</script>

4.3 最终效果图

vue对vue-giant-tree进行节点操作相关推荐

vue antvG6 多功能tree图树图树结构
vue antvG6 多功能tree图树图树结构效果展示代码环境 tree图页代码效果展示 antvg6 树结构效果图 antvg6 tree图搜索节点 antvg6 tree图显示时间,状态 ...
【vue】vue 如何获取并操作DOM元素
方法一: 直接给的元素加id,使用document.getElementById("id")获取,然后操作 dom 元素 mounted(){this.element = docu ...
Vue编写的树形tree组件
近期在进行vue的学习,自研的vue项目需要一个tree组件.由于在学习阶段,不想'拿来主义',拿别人写好的组件使用,对于处于学习阶段的开发者来说不是一件好事,虽然拿别人开发好的东西过来用可以快速进行 ...
mounted钩子函数_怎样实现Vue中mounted钩子函数获取节点高度
这次给大家带来怎样实现Vue中mounted钩子函数获取节点高度,实现Vue中mounted钩子函数获取节点高度的注意事项有哪些,下面就是实战案例,一起来看一下. 遇到的问题最近在开发一个Vue的项 ...
vue 之 ele动态删除dom节点
目录 vue 之 ele动态删除dom节点完全删除子dom节点删除最后一个dom节点 vue 之 ele动态删除dom节点比如上传失败的时候,由于ele之中的dom节点已经加载上去了.这时候需要 ...
html如何调用特殊字体,vue如何使用外部特殊字体的操作
话不多说先看效果: 我这里使用的是"优设标题这种字体",接下来就是实现步骤了: 1.先在百度上下载所需要的字体ttf文件 2.在src文件夹新建common文件夹再建 font文件 ...
js定义全局变量 vue页面_在vue项目中实现定义全局变量全局函数操作
写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一 ...
vue——初学Vue
vue--初学Vue 1.事件处理 1.1事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:只有event.ta ...
html页面渲染vue组件,Vue组件页面渲染的基本流程
html: 组件页面渲染的基本流程 main.js: import Vue from "vue"; import Home from "./home.vue"; ...
【猿说VUE】Vue列表渲染
8 VUE基础:列表渲染我们可以用 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则 ...

vue对vue-giant-tree进行节点操作

Vue-Giant-Tree

一、项目需求

二、使用ref获取dom

三、使用handleCreated方法

四、使用的完整步骤

4.1 package.json引入依赖

4.2 组件绑定

4.3 最终效果图

vue对vue-giant-tree进行节点操作相关推荐

最新文章

热门文章

vue对vue-giant-tree进行节点操作

Vue-Giant-Tree

一、 项目需求

二、使用ref获取dom

三、 使用handleCreated方法

四、使用的完整步骤

4.1 package.json引入依赖

4.2 组件绑定

4.3 最终效果图

vue对vue-giant-tree进行节点操作相关推荐

最新文章

热门文章

一、项目需求

三、使用handleCreated方法