多选模板
多选模板
SunlightSelect 支持多选功能，可以同时选择多个选项，适用于需要选择多个值的场景。
多选示例...
当前选择值：[]
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 多选示例数据
const selectValue = ref<string[]>([]);
const options = [
{ label: "选项一", value: "option1" },
{ label: "选项二", value: "option2" },
{ label: "选项三", value: "option3" },
{ label: "选项四", value: "option4" },
{ label: "选项五", value: "option5" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '多选示例...',
clearable: true,
multiple: true,
options: options,
wrapperStyle: {
borderColor: '#c0c4cc',
focusBorderColor: '#409eff',
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>当前选择值：{{ selectValue || "暂无选择" }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
隐藏源代码
多选功能示例
基础多选
最基本的多选功能，支持同时选择多个选项。
基础多选示例...
当前选择值：[]
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 基础多选示例数据
const selectValue = ref<string[]>([]);
const options = [
{ label: "选项一", value: "option1" },
{ label: "选项二", value: "option2" },
{ label: "选项三", value: "option3" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '基础多选示例...',
clearable: true,
options: options,
config: {
multiple: true,
clearable: true,
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>当前选择值：{{ selectValue || "暂无选择" }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
隐藏源代码
带选择限制的多选
通过设置 multiple-limit 限制最大选择数量。
最多选择2项...
当前选择值：[]
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 带选择限制的多选示例数据
const selectValue = ref<string[]>([]);
const options = [
{ label: "选项一", value: "option1" },
{ label: "选项二", value: "option2" },
{ label: "选项三", value: "option3" },
{ label: "选项四", value: "option4" },
{ label: "选项五", value: "option5" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '最多选择2项...',
clearable: true,
options: options,
config: {
multiple: true,
clearable: true,
multipleLimit: 2,
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>当前选择值：{{ selectValue || "暂无选择" }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
隐藏源代码
折叠标签
当选择项过多时，可以折叠显示部分标签。
折叠标签示例...
当前选择值：[]
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 折叠标签示例数据
const selectValue = ref<string[]>([]);
const options = [
{ label: "选项一", value: "option1" },
{ label: "选项二", value: "option2" },
{ label: "选项三", value: "option3" },
{ label: "选项四", value: "option4" },
{ label: "选项五", value: "option5" },
{ label: "选项六", value: "option6" },
{ label: "选项七", value: "option7" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '折叠标签示例...',
clearable: true,
options: options,
config: {
multiple: true,
clearable: true,
collapseTags: true,
collapseTagsTooltip: true,
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>当前选择值：{{ selectValue || "暂无选择" }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
隐藏源代码
可查询的多选
结合 filterable 和 multiple 实现可查询的多选功能。
可查询的多选示例...
当前选择值：[]
vue
<script setup lang="ts">
import { ref } from "vue";
import { SunlightSelect } from "sunlight-ui";
// 可查询的多选示例数据
const selectValue = ref<string[]>([]);
const options = [
{ label: "北京", value: "beijing" },
{ label: "上海", value: "shanghai" },
{ label: "广州", value: "guangzhou" },
{ label: "深圳", value: "shenzhen" },
{ label: "杭州", value: "hangzhou" },
{ label: "南京", value: "nanjing" },
{ label: "成都", value: "chengdu" },
{ label: "武汉", value: "wuhan" },
{ label: "西安", value: "xian" },
{ label: "重庆", value: "chongqing" },
];
</script>
<template>
<div>
<div style="margin-bottom: 20px">
<SunlightSelect
v-model="selectValue"
:item="{
placeholder: '可查询的多选示例...',
clearable: true,
filterable: true,
options: options,
config: {
multiple: true,
clearable: true,
},
}"
/>
</div>
<div style="margin-top: 20px">
<p>当前选择值：{{ selectValue || "暂无选择" }}</p>
</div>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
隐藏源代码
文档说明
多选配置项
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| multiple | 是否支持多选 | boolean | false |
| multiple-limit | 多选时最大选择数量，0 表示无限制 | number | 0 |
| collapse-tags | 多选时是否折叠标签 | boolean | false |
| collapse-tags-tooltip | 折叠标签时是否显示 tooltip | boolean | false |
| min-collapse-tags | 最小折叠标签数量 | number | 2 |