element ui Checkbox 返回对象
时间: 2023-06-30 11:17:32 浏览: 161
element ui
在 Element 中,Checkbox 组件支持使用 `v-model` 指令绑定一个 Boolean 类型的变量或一个数组来控制 Checkbox 的勾选状态。如果使用数组来绑定多个 Checkbox,那么在选择时,数组中会存储选中的每个 Checkbox 的 value 值(如果没有设置 value,则默认为 label 值)。
如果需要返回一个对象,可以使用 `v-model` 绑定一个对象。以下是一个示例:
```
<template>
<div>
<el-checkbox-group v-model="checkedList">
<el-checkbox v-for="item in options" :key="item.value" :label="item">{{ item.label }}</el-checkbox>
</el-checkbox-group>
<p>选中的选项:{{ checkedList }}</p>
</div>
</template>
<script>
export default {
data() {
return {
checkedList: [],
options: [
{ label: '选项 1', value: 1 },
{ label: '选项 2', value: 2 },
{ label: '选项 3', value: 3 }
]
};
}
};
</script>
```
在上述示例中,`v-model` 绑定的是一个数组 `checkedList`,但选项的 value 值是一个对象。这里使用 `:label="item"` 将整个选项对象作为 value 值,因此在选择时,数组中会存储选中的对象。可以在模板中通过 `{{ checkedList }}` 来查看选中的选项。
需要注意的是,如果使用对象作为 value 值,那么在选项中需要保证对象的唯一性,否则可能会出现一些意料之外的问题。
阅读全文