### 如何在 `a-checkbox-group` 组件中配置 options 的 value
和 label 属性
为了在 `a-checkbox-group` 组件中正确显示选项并绑定数据，需要通过 `options` 属性传递一个数组给组件。这个数组中的每一个元素应该是一个对象，该对象至少包含两个属性：`
label`
和 `value`。
#### 使用对象形式的 options 配置
当使用对象来表示每个选项时，可以通过指定 `
label` 来展示文本内容，并用 `value` 做为实际存储的数据值：
```
html
<a-checkbox-group v-model="checkedList">
<a-row :gutter="24">
<a-col :span="6" v-for="{ value,
label } in Options" :key="value">
<a-checkbox :value="value">@change="change($event,value)"{{
label }}</a-checkbox>
</a-col>
</a-row>
</a-checkbox-group>
```
上述代码片段展示了如何遍历 `Options` 数组并将其中的对象解构
赋值给 `v-for` 循环内的变量，在此过程中指定了 `value`
和 `
label`[^1]。
对于更简单的场景，可以直接利用 `options` 属性传入带有 `
label`
和 `value` 键的对象列表作为参数：
```
html
<a-checkbox-group v-model="selPubTypes" :options="pubTypes"/>
```
这里假设 `pubTypes` 是一个由多个具有 `
label`
和 `value` 字段的对象组成的数组[^3]。
另外一种情况是在初始化页面加载时就希望某些复选框被默认勾选，则可以像下面这样设置初始状态下的 `defaultCheckedList` 变量以及对应的 `plainOptions`:
```javascript
const plainOptions = [
{
label: '读', value: '1' },
{
label: '写', value: '2' },
{
label: '删', value: '3' }
];
const defaultCheckedList = ['1', '2']; // 默认选中 的项
export default {
data() {
return {
plainOptions,
defaultCheckedList,
};
}
};
```
这段脚本定义了一个名为 `plainOptions` 的常量用于保存所有的可选项，并设定了另一个叫作 `defaultCheckedList` 的数组用来表明哪些条目应当预先处于已选择的状态[^5]。
#### 完整示例
结合以上几点，完整的
HTML 结合 JavaScript 示例可能看起来像是这样的：
```
html
<template>
<
div id="app">
<a-checkbox-group v-model="defaultCheckedList" :options="plainOptions" />
</
div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App',
setup() {
const plainOptions = [
{
label: '读', value: '1' },
{
label: '写', value: '2' },
{
label: '删', value: '3' }
];
const defaultCheckedList = ['1', '2'];
return {
plainOptions,
defaultCheckedList,
};
}
});
</script>
```
本文介绍了HTML中的Label元素用法，澄清了Label元素没有value属性这一常见误解，并详细解释了如何通过innerText和innerHTML属性来操作Label元素的内容。
扫一扫
7683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
