Vue是當下非常流行的一種JavaScript框架，它的組件化風格使得開發者可以更加方便地搭建自己的項目。而zTree則是一款基于jQuery的樹形菜單插件，可以幫助開發者更加高效地展示數據及進行操作。我們可以借助Vue和zTree的優勢來自造一款自己的樹形菜單組件。

首先，我們需要安裝zTree插件和jQuery庫。在Vue組件中使用jQuery需要注意，我們不能直接在模板中使用，而是需要在mounted鉤子函數中通過this.$nextTick()將其封裝為一種類似于插件的形式。

mounted() {
this.$nextTick(() => {
const $ = require('jquery');
window.jQuery = $;
require('ztree');
// ... 其他代碼
})
}

接著，我們需要考慮Vue組件的數據結構。我們可以將zTree的配置對象作為組件的一個prop屬性傳遞進來，并在組件內將其轉化為zTree所需的格式。

<template>
<div class="tree"></div>
</template>
<script>
export default {
props: ['treeConfig'],
data() {
return {
treeObj: null // zTree對象
}
},
mounted() {
this.$nextTick(() => {
// 將treeConfig轉為zTree格式
let data = this.transformData(this.treeConfig.data);
let setting = Object.assign({}, this.treeConfig, {data: {simpleData: { enable: true, idKey: 'id', pIdKey: 'pid' }, key: { name: 'text' }}})
this.treeObj = $.fn.zTree.init(this.$el, setting, data);
})
},
methods: {
transformData(data) {
return data.map(item => {
return Object.assign({}, item, {id: item.id || '', pid: item.pid || null});
})
}
}
}
</script>

最后，我們可以在父組件中使用自造的zTree組件。

<template>
<div>
<my-tree :treeConfig="treeConfig"></my-tree>
</div>
</template>
<script>
import MyTree from './MyTree.vue';
export default {
components: {MyTree},
data() {
return {
treeConfig: {
data: [{id: 1, text: '節點1'}, {id: 2, pid: 1, text: '節點2'}, {id: 3, pid: 1, text: '節點3'}],
callback: {
onClick: (event, treeId, treeNode) => {
console.log(treeNode);
}
}
}
}
}
}
</script>

以上便是一個簡單的Vue+自造zTree組件的示例，希望能對大家有所幫助。