<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,       
},

首先我们看一下,这个复选框的结构以及对应的事件(这里说一些官方文档上没有的)

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

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

 

2) 默认选中

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

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

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

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

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

 

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

GitHub 加速计划 / eleme / element
13
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐