vant 列表,vant选择器,vant树型菜单多级,vant tab list,vant css,vant多选
Vant4 TreeSelect 是一个 Vue UI 组件库 Vant4 中的分类选择组件，它可以用于从层级结构中选择数据。

用户可以通过展开/折叠树形列表来浏览和选择选项。TreeSelect 支持单选和多选两种模式，并提供了丰富的配置选项，例如自定义选项图标、自定义过滤器等。

以下是一个例子：

html
<template>
<van-tree-select
v-model="currentValue"
:items="data"
:main-active-index.sync="activeIndex"
:height="300"
@click-nav="handleClickNav"
@change="handleChange"
placeholder="请选择地址"
/>
</template>

<script>
export default {
data() {
return {
data: [
{
text: '广东省',
children: [
{
text: '深圳市',
children: [
{ id: '1', text: '南山区' },
{ id: '2', text: '福田区' },
{ id: '3', text: '罗湖区' },
],
},
{
text: '广州市',
children: [
{ id: '4', text: '天河区' },
{ id: '5', text: '海珠区' },
{ id: '6', text: '白云区' },
],
},
],
},
{
text: '湖南省',
children: [
{
text: '长沙市',
children: [
{ id: '7', text: '雨花区' },
{ id: '8', text: '岳麓区' },
{ id: '9', text: '芙蓉区' },
],
},
{
text: '株洲市',
children: [
{ id: '10', text: '天元区' },
{ id: '11', text: '荷塘区' },
{ id: '12', text: '芦淞区' },
],
},
],
},
],
activeIndex: 0,
currentValue: [],
};
},
methods: {
handleClickNav({ index }) {
this.activeIndex = index;
},
handleChange(value) {
console.log('选中的值：', value);
},
},
};
</script>


在这个例子中，我们创建了一个 TreeSelect 组件，使用 items 属性提供树形数据源。用户可以通过展开/折叠树形列表来选择地址信息，并且可以查看当前选择的值。