admin管理员组文章数量:1649156
饿了么框架大家使用的都比较多，今天介绍一个关于折叠面板的业务场景：
默认的折叠面板单击就可打开，业务要求通过复选框控制折叠面板的打开
如图是默认的折叠面板展示：
下面这张图是修改为依靠复选框打开折叠面板的效果：
代码如下：
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item name="1">
// name='1' 就是当前折叠面板对应的值
<template slot="title">
<el-checkbox v-model="transfer_subject" @change="handleCheck('1')">转学科</el-checkbox>
//通过change事件将当前面板的值传递进行
</template>
<el-form-item v-if="transfer_subject" label="转岗至新学部如下:" label-width="160" prop="transfer_subject">
<el-radio-group v-model="form.transfer_subject" class="teacher_header_move">
<el-radio v-for="item in formOption.subjects || []" :label="item.id +''" :key="item.id" class="form-checkbox-minwidth">{{item.name}}
</el-radio>
</el-radio-group>
</el-form-item>
</el-collapse-item>
</el-collapse>
data中定义activeNames,它里面存储的是当前折叠面板中已经被打开的面板对应的值
transfer_subject来控制复选框的选择状态
data () {
return {
activeNames: [],
transfer_subject: false }
点击折叠面板会触发handleChange()事件，里面的val值就是选中的数据，通过
this.activeNames= [ ]
方法，将每次选中的置空，这样就不会打开折叠面板。
handleChange (val) {
this.activeNames = []
}
这里就是将选中的复选框对应的面板进行处理，val就是面板对应的值
handleCheck (val) {
if (this.transfer_subject) {
this.activeNames.push('1')
} else if (!this.transfer_subject) {
this.activeNames = this.activeNames.shift()
}
- 通过this.transfer_subject判断复选框的选择状态，如果是选中的则
- 通过push方法将，当前面板的值填加进去，当前面板就会打开否则
- 通过shift将activeNames里面存储的值去掉，当前面板就会关闭以上就是整个业务处理过程，其中还有不妥之处，请多指教。
版权声明：本文标题：通过复选框控制折叠面板的打开与关闭 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1729511271a1204039.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论