如何向el-checkbox-group塞数据
时间: 2023-12-20 16:27:30 浏览: 109
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选,单选
5星 · 资源好评率100%
el-checkbox-group组件可以通过v-model来绑定数据,实现向el-checkbox-group塞数据。具体操作步骤如下:
1. 在data中定义一个数组变量,用来存储要塞入的数据。
2. 在el-checkbox-group组件上使用v-model指令,将该数组变量与el-checkbox-group绑定起来。
3. 将要塞入的数据添加到该数组变量中。
代码示例:
```html
<template>
<div>
<el-checkbox-group v-model="checkboxData">
<el-checkbox v-for="item in checkboxOptions" :label="item.value" :key="item.key">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
checkboxOptions: [
{ key: 1, label: '选项1', value: 'option1' },
{ key: 2, label: '选项2', value: 'option2' },
{ key: 3, label: '选项3', value: 'option3' },
],
checkboxData: [], // 存储选中的数据
};
},
};
</script>
```
在这个例子中,checkboxOptions数组存储了要显示的选项,checkboxData数组用来存储实际选中的数据。通过v-model将checkboxData与el-checkbox-group组件绑定,实现向el-checkbox-group塞数据。
阅读全文