用于从一组相关联的数据集合中进行选择。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from "vue";
import { TreeSelect } from "vant";
const app = createApp();
app.use(TreeSelect);
item 为分类显示所需的数据,数据格式见下方示例。main-active-index 表示左侧高亮选项的索引,active-id 表示右侧高亮选项的 id。
<van-tree-select
v-model:active-id="state.activeId"
v-model:main-active-index="state.activeIndex"
:items="items"
/>
import { reactive } from "vue";
export default {
setup() {
const state = reactive({
activeId: 1,
activeIndex: 0,
});
const items = [
{
text: "浙江",
children: [
{ text: "杭州", id: 1 },
{ text: "温州", id: 2 },
],
},
{
text: "江苏",
children: [
{ text: "南京", id: 5 },
{ text: "无锡", id: 6 },
],
},
];
return {
state,
items,
};
},
};
active-id 为数组格式时,可以选中多个右侧选项。
<van-tree-select
v-model:active-id="state.activeIds"
v-model:main-active-index="state.activeIndex"
:items="items"
/>
import { reactive } from "vue";
export default {
setup() {
const state = reactive({
activeId: [1, 2],
activeIndex: 0,
});
const items = [
{
text: "浙江",
children: [
{ text: "杭州", id: 1 },
{ text: "温州", id: 2 },
],
},
{
text: "江苏",
children: [
{ text: "南京", id: 5 },
{ text: "无锡", id: 6 },
],
},
];
return {
state,
items,
};
},
};
通过 content 插槽可以自定义右侧区域的内容。
<van-tree-select
v-model:main-active-index="activeIndex"
height="55vw"
:items="items"
>
<template #content>
<van-image
v-if="activeIndex === 0"
src="https://img.mysqlcn.com/upload11/2303/131327810.jpg" rel="external nofollow"
/>
<van-image
v-if="activeIndex === 1"
src="https://img.mysqlcn.com/upload11/2303/131327350.jpg" rel="external nofollow"
/>
</template>
</van-tree-select>
import { ref } from "vue";
export default {
setup() {
const activeIndex = ref(0);
return {
activeIndex,
items: [{ text: "分组 1" }, { text: "分组 2" }],
};
},
};
设置 dot 属性后,会在图标右上角展示一个小红点;设置 badge 属性后,会在图标右上角展示相应的徽标。
<van-tree-select
v-model:main-active-index="activeIndex"
height="55vw"
:items="items"
/>
import { ref } from "vue";
export default {
setup() {
const activeIndex = ref(0);
return {
activeIndex,
items: [
{ text: "浙江", children: [], dot: true },
{ text: "江苏", children: [], badge: 5 },
],
};
},
};
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
items | 分类显示所需的数据 | Item[] | []
|
height | 高度,默认单位为px
|
number | string | 300
|
main-active-index | 左侧选中项的索引 | number | string | 0
|
active-id | 右侧选中项的 id,支持传入数组 | number | string | (number | string)[] |
0
|
max | 右侧项最大选中个数 | number | string | Infinity
|
selected-icon | 自定义右侧栏选中状态的图标 | string | success
|
事件名 | 说明 | 回调参数 |
---|---|---|
click-nav | 点击左侧导航时触发 | index:被点击的导航的索引 |
click-item | 点击右侧选择项时触发 | data: 该点击项的数据 |
名称 | 说明 |
---|---|
content | 自定义右侧区域内容 |
items 整体为一个数组,数组内包含一系列描述分类的对象,每个分类里,text表示当前分类的名称,children表示分类里的可选项。
[
{
// 导航名称
text: "所有城市",
// 导航名称右上角徽标
badge: 3,
// 是否在导航名称右上角显示小红点
dot: true,
// 导航节点额外类名
className: "my-class",
// 该导航下所有的可选项
children: [
{
// 名称
text: "温州",
// id,作为匹配选中状态的标识符
id: 1,
// 禁用选项
disabled: true,
},
{
text: "杭州",
id: 2,
},
],
},
];
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--van-tree-select-font-size | var(--van-font-size-md) | - |
--van-tree-select-nav-background-color | var(--van-background-color) | - |
--van-tree-select-content-background-color | var(--van-white) | - |
--van-tree-select-nav-item-padding | 14px var(--van-padding-sm) | - |
--van-tree-select-item-height | 48px | - |
--van-tree-select-item-active-color | var(--van-danger-color) | - |
--van-tree-select-item-disabled-color | var(--van-gray-5) | - |
--van-tree-select-item-selected-size | 16px | - |
我们对字体进行统一规范,力求在各个操作系统下都有最佳展示效果。中文字体英文/数字字体Font-family 代码font-family: "Helvet...
用于选择或输入日期选择日以「日」为基本单位,基础的日期选择控件基本单位由type属性指定。快捷选项需配置shortcuts,禁用日期...
本文档将帮助你从 Element 2.x 升级至 Element Plus.不兼容更新以下是不兼容更新的列表本文档有待完善,目前请参考这里的不兼容...