首先，确保你已经正确引入了 Vant4 的相关组件和样式。接着，你可以按照以下步骤使用 TreeSelect：
1. 安装 Vant4：
确保你已经安装了 Vant4，可以使用 npm 或 yarn 安装：
npm install vant@next --save
# 或
yarn add vant@next
2. 在你的 Vue 组件中引入 TreeSelect：
<template>
<div>
<van-tree-select
:items="treeData"
v-model="selectedCategoryId"
placeholder="请选择分类"
:main-active-index="mainActiveIndex"
@click-nav="onClickNav"
/>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
text: '分类1',
children: [
{ text: '子分类1-1' },
{ text: '子分类1-2' },
// 可以继续嵌套子分类
]
},
{
text: '分类2',
children: [
{ text: '子分类2-1' },
{ text: '子分类2-2' },
// 可以继续嵌套子分类
]
},
// 可以继续添加其他分类
],
selectedCategoryId: null,
mainActiveIndex: 0
};
},
methods: {
onClickNav({ index }) {
this.mainActiveIndex = index;
}
}
};
</script>
在上述示例中，treeData 是一个包含分类和子分类的树形数据，selectedCategoryId 是选择的分类的 ID，mainActiveIndex 是当前选中的主分类的索引。
请根据你的实际需求调整数据结构和样式，确保适应你的项目。
转载请注明出处：http://www.zyzy.cn/article/detail/5854/Vant