使用vue-giant-tree根据id定位位置

19 篇文章 0 订阅
<tree
                :setting="setting"
                :nodes="getTreeData"
                @onClick="selectTree"
                @onCreated="handleCreated"
              />

引入

import tree from "vue-giant-tree";
components: {
tree
 },
 data() {
   return {
   setting: {
       check: {
       enable: false,
     },
       data: {
         key:{
           name:"label",
         },
         view: {
                   // 开启图标显示功能
                   showIcon: true,
                   expandSpeed: 500
                   },
         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中写方法

handleCreated(ztreeObj) {
               console.log("加载树完成");
               this.ztreeObj = ztreeObj;
               // let firstTree = ztreeObj.getNodes()[0];
               // 默认选中第一个
               // ztreeObj.selectNode(firstTree);
               // 设置节点全部展开
               // ztreeObj.expandAll(true);
               let node=this.ztreeObj.getNodeByParam('id',this.formItem.term_code)
               this.ztreeObj.selectNode(node,true);
           },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值