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上绑定的值就是默认选中的值。
这个值有个要求他必须是普通的数组,不能是对象数组那种。
原文地址:http://www.cnblogs.com/IwishIcould/p/16879211.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性