引入import Vue from 'vue';
import { TreeSelect } from 'vant';
(TreeSelect);
代码演示
单选模式
item为分类显示所需的数据，数据格式见下方示例。main-active-index表示左侧高亮选项的索引，active-id表示右侧高亮选项的 id
:items="items"
:active-id.sync="activeId"
:="activeIndex"
/>export default {
data() {
return {
items,
activeId: 1,
activeIndex: 0
};
}
}
多选模式
active-id为数组格式时，可以选中多个右侧选项
:items="items"
:="activeIds"
:="activeIndex"
/>export default {
data() {
return {
items,
activeIds: [1, 2],
activeIndex: 0
};
}
}
自定义内容
通过content插槽可以自定义右侧区域的内容
height="55vw"
:items="items"
:="active"
>
export default {data() {
return {
active: 0,
items: [{ text: '分组 1' }, { text: '分组 2' }]
}
}
}
提示信息
设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标
height="55vw"
:items="items"
:="activeIndex"
/>export default {
data() {
return {
activeIndex: 0,
items: [
{ text: '浙江', children: [], dot: true },
{ text: '江苏', children: [], info: 5 }
]
}
}
}
API
Props参数说明类型默认值items分类显示所需的数据Item[][]
height高度，默认单位为pxnumber | string300
main-active-index左侧选中项的索引number | string0
active-id右侧选中项的 id，支持传入数组number | string |
(number | string)[]0
max v2.2.0右侧项最大选中个数number | stringInfinity
Events事件名说明回调参数click-nav点击左侧导航时触发index：被点击的导航的索引
click-item点击右侧选择项时触发data: 该点击项的数据
Slots名称说明content自定义右侧区域内容
Item 数据结构
items 整体为一个数组，数组内包含一系列描述分类的对象，每个分类里，text表示当前分类的名称，children表示分类里的可选项。[
{
// 导航名称
text: '所有城市',
// 导航名称右上角徽标
info: 3,
// 是否在导航名称右上角显示小红点
dot: true,
// 导航节点额外类名
className: 'my-class',
// 该导航下所有的可选项
children: [
{
// 名称
text: '温州',
// id，作为匹配选中状态的标识符
id: 1,
// 禁用选项
disabled: true
},
{
text: '杭州',
id: 2
}
]
}
]