element-ui 框架的checkbox组件详解

雨点打透心脏的1/2处 2023-06-13 09:29 10阅读 0赞

<el-checkbox-group v-model="form.powerIdArr" @change="changeGroup">
      <el-checkbox @change='changeLick' v-for="item in powerList" 
      :label="item.powerId" name="type">{
       {item.powerDescription}}</el-checkbox>
    </el-checkbox-group>

form: {
      childName: '',
      childMenuUrl: '',
      childParamsIn: '',
      childIconClass: '',
      childDescription: '',
      powerIdArr: ['6'],
      childParentId: 0,       
    },

首先我们看一下，这个复选框的结构以及对应的事件（这里说一些[官方文档][Link 1]上没有的）

**1.     v-model ** 是用来控制复选框是否选中的，

1）  是必写的，不写页面不会展示复选框，还会报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

2） 默认选中

**v-model** 是一个数组，数组里面的内容就是默认选中的复选框的** label** 值，上面我数组里面写的是 6 ，所以选中的就是label值为 6 的复选框，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

form: {
              childName: '',
              childMenuUrl: '',
              childParamsIn: '',
              childIconClass: '',
              childDescription: '',
              powerIdArr: ['6','3'],   //默认选中两个，label为6和3的被选中
              childParentId: 0,      
            },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

2. 点击事件  **el-checkbox-group ** 和 **el-checkbox **上的点击事件都是 **change 事件**

**el-checkbox-group ** 打印的内容是所选的中的复选框的label值，是个数组

**el-checkbox             ** 打印的是当前复选框选中的状态，是个布尔值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3][]

希望可以帮到大家，如有不足欢迎补充，[这里是官方文档的地址][Link 1]，可以结合看，更容易理解

[Link 1]: https://element.eleme.cn/#/zh-CN/component/checkbox
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201230095459737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191115152841459.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191115153038736.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191115154127881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70