一，js代码：
<template>
<div>
<div style="width:700px;margin:auto;display:flex;flex-direction: column;">
<div>请选择喜欢的角色:</div>
<el-checkbox-group v-model="checkboxSetRole" style="width:700px;background: #ffff00;margin-top: 10px;">
<el-checkbox v-for="roleone in roles" :label="roleone.roleid" :key="roleone.roleid">
{{roleone.rolename}}
</el-checkbox>
</el-checkbox-group>
<div style="margin-top: 10px;"><el-button @click="submitForm" style="width:100px;">提交</el-button></div>
</div>
</div>
</template>
<script>
import {ref} from "vue"
export default {
name: "MyCheckbox",
setup() {
//选中的结果
const checkboxSetRole = ref([]);
//复选框要显示的数组
const roles = ref([]);
//添加数据到数组
let one = {roleid:"1",rolename:"老刘"};
roles.value.push(one);
let two = {roleid:"2",rolename:"赵四"};
roles.value.push(two);
let three = {roleid:"3",rolename:"谢广坤"};
roles.value.push(three);
let four = {roleid:"4",rolename:"王老七"};
roles.value.push(four);
//表单提交时得到复选框的值
const submitForm = () => {
if (checkboxSetRole.value.length <= 0) {
alert('请最少选择一个选项');
return;
}
let rolesvalue=checkboxSetRole.value.join();
alert("已选中:"+rolesvalue);
}
return {
roles,
checkboxSetRole,
submitForm,
}
}
}
</script>
<style scoped>
/* 此处指定复选框的宽度 */
.el-checkbox.el-checkbox{
float:left;
margin-left:10px;
width: 190px;
height: 25px;
}
</style>
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: [email protected]
二，测试效果
三，查看vue框架的版本:
root@lhdpc:/data/vue/imgtouch# npm list vue [email protected] /data/vue/imgtouch ├─┬ @vue/[email protected] │ └─┬ @vue/[email protected] │ └── [email protected] deduped └─┬ [email protected] └─┬ @vue/[email protected] └── [email protected] deduped
查看element-plus的版本:
liuhongdi@lhdpc:/data/vue/imgtouch$ npm list element-plus [email protected] /data/vue/imgtouch └── [email protected]
标签：el,checkbox,roles,imgtouch,37,复选框,vue,3.2 From： https://www.cnblogs.com/architectforest/p/16795285.html