element-ui 框架的checkbox组件 详解
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
<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 打印的是当前复选框选中的状态,是个布尔值

希望可以帮到大家,如有不足欢迎补充,这里是官方文档的地址,可以结合看,更容易理解
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
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 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)