checkbox-group 把多个checkbox管理为一组(需要注意的坑)
很多时候我们需要会遇见这样的场景。
比如用户需要选择多个值.
这个时候我们需要把多个 checkbox 放置在checkbox-group下。
目的是:需要知道用户选择了那些值,并且把这些值发送给后台。
勾选其中一个值时--自动勾选了全部
<template>
<div class="box">
<el-checkbox-group v-model="checkList">
<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 {
checkList:'',
}
},
}
</script>
为什么会出现上面这样的情况-如何解决
checkbox-group元素能把多个 checkbox 管理为一组.
只需要在 Group 中使用v-model绑定Array类型的变量即可。
如果是v-model绑定的值是字符串。则会出现勾选其中一个值时,自动勾选了全部。
解决办法:
将checkList的值变为数组就可以解决这个 checkList:[]
选中的是中文值,发送给后台的是它的对应值
<template>
<div class="box">
<el-checkbox-group v-model="checkList">
<!-- label绑定的值是要传的值 -->
<el-checkbox :label="item.value" v-for="(item,index) in listArr" :key="index">
<!-- 视图上显示给用户看的值 -->
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
<el-button @click="sendHandler">传递的值</el-button>
</div>
</template>
<script>
export default {
data() {
return {
listArr: [
{ label: '复选框 A', value: 'a' },
{ label: '复选框 B', value: 'b' },
{ label: '复选框 C', value: 'c' },
{ label: '复选框 C', value: 'd' },
],
checkList:['a'], //他必须是普通的数组. 会默认选中 ”复选框 A“
}
},
methods: {
sendHandler() {
console.log( '获取的值', this.checkList)
}
}
}
</script>
需要注意的点
1. el-checkbox-group上绑定的值就是默认选中的值。
这个值有个要求他必须是普通的数组,不能是对象数组那种。