一、概述
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
二、代码实现
test.vue
代码语言：javascript复制<template>
<div style="width: 70%;margin-left: 30px;margin-top: 30px;">
<el-checkbox-group v-model="checkList">
<el-checkbox v-for="item in itemList" :key="item.id" :label="item.name" :value="item.id"></el-checkbox>
<!-- <el-checkbox label="复选框 A"></el-checkbox>-->
<!-- <el-checkbox label="复选框 B"></el-checkbox>-->
<!-- <el-checkbox label="复选框 C"></el-checkbox>-->
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
// 所有列表
itemList:[
{
id: 1,
name: "复选框 A"
},
{
id: 2,
name: "复选框 B"
},
{
id: 3,
name: "复选框 C"
},
],
// 选中列表
checkList: ['复选框 A','复选框 C']
}
},
}
</script>
<style>
</style>访问页面，效果如下：
注意：checkList里面的值，必须和页面显示的一致，才能选中。
本文参考链接：
https://element.eleme.io/#/zh-CN/component/checkbox
