vue.js3:用elcheckbox做复选框(vue@3.2.37 / elementplus@2.2.2)

一，js代码：

<template>
<div>
  <div style="700px;margin:auto;display:flex;flex-direction: column;">
    <div>请选择喜欢的角色:</div>
    <el-checkbox-group v-model="checkboxSetRole"  style="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="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

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

 

三，查看vue框架的版本:

root@lhdpc:/data/vue/imgtouch# npm list vue
imgtouch@0.1.0 /data/vue/imgtouch
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped

查看element-plus的版本:

liuhongdi@lhdpc:/data/vue/imgtouch$ npm list element-plus
imgtouch@0.1.0 /data/vue/imgtouch
└── element-plus@2.2.2