<a-checkbox-group v-model:value="state.checkedList" :options="plainOptions" /> 自定义显示的label
时间: 2024-11-09 09:25:12 浏览: 21
vue v-model实现自定义样式多选与单选功能
`<a-checkbox-group>` 是 Ant Design Vue 中的一个组件,它用于创建一组复选框,并通过 `v-model` 和 `options` 属性关联数据。在这个例子中:
- `v-model:value="state.checkedList"` 表示复选框组的状态绑定到 `state.checkedList`,这是一个数组,记录了哪些选项被勾选。
- `:options="plainOptions"` 将一个对象数组 `plainOptions` 作为选项传递给组件。每个对象通常包含两个属性:`value` (表示复选框的值,比如字符串或数字)和 `label` (显示在界面上的文字标签)。
如果你想自定义每个选项的 `label` 属性,你应该提供一个 `label` 字段在 `plainOptions` 对象中,就像这样:
```html
<a-checkbox-group v-model:value="state.checkedList" :options="[
{ value: 'option1', label: '选项一' },
{ value: 'option2', label: '选项二' },
{ value: 'option3', label: '我的定制标签' }
]">
</a-checkbox-group>
```
这样,当你选择不同的选项时,对应的标签会显示为预设的内容。如果需要动态改变 `label`,你可以根据 `state` 的变化实时更新 `plainOptions` 数组。
阅读全文