<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);
},