1. 首先，确保你的项目已经安装了 Vant。你可以使用 npm 或 yarn 安装：
npm install vant
或
yarn add vant
2. 在你的 Vue 项目中，可以在组件中导入并使用 Vant 的 TreeSelect：
<template>
<div>
<!-- TreeSelect 组件 -->
<van-tree-select
:items="treeData"
v-model="selectedItems"
:main-active-index.sync="mainActiveIndex"
:active-id.sync="activeId"
>
</van-tree-select>
<!-- 显示选择结果 -->
<div>
选择的分类：
<span v-for="(item, index) in selectedItems" :key="index">
{{ item.text }}
</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 树形数据
treeData: [
{
text: '分类1',
id: 1,
children: [
{ text: '子分类1-1', id: 11 },
{ text: '子分类1-2', id: 12 },
],
},
{
text: '分类2',
id: 2,
children: [
{ text: '子分类2-1', id: 21 },
{ text: '子分类2-2', id: 22 },
],
},
],
// 选中的分类
selectedItems: [],
// 主选项的索引
mainActiveIndex: 0,
// 子选项的 id
activeId: null,
};
},
};
</script>
以上代码中，treeData 是一个包含树形数据的数组。你可以根据实际情况修改这个数组，以适应你的分类结构。
3. 在 van-tree-select 组件中，使用 v-model 来绑定选中的分类，main-active-index 和 active-id 分别用于设置主选项和子选项的默认选中状态。
这就是一个简单的 Vant TreeSelect 的用法示例。你可以根据自己的需求进一步定制，比如通过监听事件获取选中状态等。
转载请注明出处：http://www.zyzy.cn/article/detail/5701/Vant