ProCheckboxGroup 多选框组
基于 NCheckboxGroup 封装，通过 options 声明式渲染。
基础用法
多选框组
基础用法、多选、含禁用项。
vue
<script setup lang="ts">
import { ProCheckboxGroup } from '@naive-ui-pro/pro-checkbox-group'
import { ref } from 'vue'
const value1 = ref(['reading'])
const value2 = ref(['vue', 'react'])
const value3 = ref(['a'])
const options1 = [
{ label: '阅读', value: 'reading' },
{ label: '运动', value: 'sports' },
{ label: '音乐', value: 'music' },
{ label: '旅行', value: 'travel' },
]
const options2 = [
{ label: 'Vue.js', value: 'vue' },
{ label: 'React', value: 'react' },
{ label: 'Angular', value: 'angular' },
{ label: 'Svelte', value: 'svelte' },
]
const options3 = [
{ label: '选项A', value: 'a' },
{ label: '选项B（禁用）', value: 'b', disabled: true },
{ label: '选项C', value: 'c' },
]
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 20px;">
<div>
<div style="margin-bottom: 8px; font-weight: 500;">
基础用法
</div>
<ProCheckboxGroup v-model:value="value1" :options="options1" />
<div style="margin-top: 4px; font-size: 13px; color: var(--vp-c-text-2);">
选中: {{ value1 }}
</div>
</div>
<div>
<div style="margin-bottom: 8px; font-weight: 500;">
多选（技术栈）
</div>
<ProCheckboxGroup v-model:value="value2" :options="options2" />
<div style="margin-top: 4px; font-size: 13px; color: var(--vp-c-text-2);">
选中: {{ value2 }}
</div>
</div>
<div>
<div style="margin-bottom: 8px; font-weight: 500;">
含禁用项
</div>
<ProCheckboxGroup v-model:value="value3" :options="options3" />
</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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | (string|number)[] | - | 选中值(v-model) |
| options | CheckboxProps[] | [] | 选项配置 |
继承 Naive UI NCheckboxGroup 全部 Props。