使用vant实现一个ztree的列表

在Vue3中使用Vant库实现ZTree（一款流行的树形控件）的功能，首先需要安装`zent-ui-ztree`这个第三方库，它包含了ZTree的样式和JavaScript组件。你可以通过npm或yarn来安装：

# npm
npm install zent-ui-ztree

# 或者 yarn
yarn add zent-ui-ztree

接下来，在项目中引入并注册ZTree组件：

import ZTree from "zent-ui-ztree";

// 在main.js或App.vue中注册ZTree
Vue.component("zent-tree", ZTree);

然后在你的组件模板中使用ZTree组件，这里是一个基本的例子：

<template>
  <div>
    <zent-tree :data="treeData" style="width: 400px; height: 500px;"></zent-tree>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ZTree from 'zent-ui-ztree';

export default defineComponent({
  setup(props, context) {
    const treeData: any[] = [
      {
        name: '根节点1',
        children: [
          {
            name: '子节点1-1',
          },
          {
            name: '子节点1-2',
          },
        ],
      },
      {
        name: '根节点2',
        children: [
          {
            name: '子节点2-1',
          },
        ],
      },
    ];

    return {
      treeData,
    };
  },
});
</script>

在这个例子中，`treeData`是一个包含层级结构的对象数组，每个节点都有一个`name`属性表示名称。你可以根据实际需求调整数据结构。

如果你需要自定义节点加载、事件监听等功能，可以在组件内部暴露相应的接口，供外部调用。例如：

<template>
  <div>
    <zent-tree ref="zTree" :data="treeData" @onNodeClick="handleNodeClick" :loadData="customLoadData"></zent-tree>
  </div>
</template>

<script lang="ts">
// ... (前面的代码保持不变)

methods: {
  handleNodeClick(node) {
    console.log(`节点 ${node.name} 被点击`);
  },
  
  customLoadData(treeId, treeNode, callback) {
    // 这里可以根据treeNode.id异步加载子节点数据
    setTimeout(() => {
      callback([{ name: '子节点' }]);
    }, 1000);
  },
}
</script>