1. 程式人生 > 其它 >ant -design vue a-tree 樹形控制元件

ant -design vue a-tree 樹形控制元件

話不多說,先上程式碼。

<a-tree
      v-if="this.treeData && this.treeData.length > 0"
       ref="tree"
       :treeData="treeData"
        :defaultExpandedKeys="expandedKeys"
         :defaultSelectedKeys="expandedKeys"
         @select="treeSelect"
         :title="title"
       >
       <a-icon slot="switcherIcon" type="down" />
</a-tree> 
<script>
import {getTreeDate, queryTreeDate,DelDate} from "@api/api"
data() { return { treeData: [], }; },
created() {
this.printList(this.$route.query.spaceid);
this.queryBody(this.$route.query.contentid);
},
treeSelect(selectedKeys,e) {
//獲取麵包屑
this.breadList = [];
// console.log("這是啥",e.node.parent);
this.title = e.node._props.title
// this.contentid = e.node.eventKey;
console.log("這個是key:",e.node.eventKey)
console.log("這個是key:",e.node.pos)
this.queryBody(e.node.eventKey);
},
queryBody(id){
if (id!=null){
this.$router.push({path:'/knowledge/AllUpdates/Details?contentid='+id+'&spaceid='+this.$route.query.spaceid});
queryTreeDate({"contentid":id}).then((res) => {
if (res.success) {
this.title = res.result.title;
this.content = res.result.body;
this.name = res.result.lastName;
this.lastDate = res.result.lastmoddate;
}
})
}
},
printList(params,params1){
console.log(params1)
getTreeDate({"spaceid":params}).then((res) => {
if (res.success) {
this.treeData = res.result;
console.log(params,params1)
this.expandedKeys=[this.$route.query.contentid];
console.log(this.expandedKeys);

}
});
},
  }
};
</script>