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

最新推荐文章于 2024-04-26 15:21:07 发布

limit for me

最新推荐文章于 2024-04-26 15:21:07 发布

阅读量2.4k

点赞数

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

本文链接：https://blog.csdn.net/limmt2020/article/details/124943236

版权

js 同时被 2 个专栏收录

44 篇文章 5 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

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",
            //父级id
            pIdKey: "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.ztreeObj
	if(treeNode.isParent == false){
        var selectedNode = this.ztreeObj.getSelectedNodes();
             this.ztreeObj.addNodes(selectedNode[0], add);
     }
}