admin管理员组文章数量:1649150
饿了么框架大家使用的都比较多,今天介绍一个关于折叠面板的业务场景:
默认的折叠面板单击就可打开,业务要求通过复选框控制折叠面板的打开
如图是默认的折叠面板展示:
下面这张图是修改为依靠复选框打开折叠面板的效果:
代码如下:
<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://www.elefans.com/dongtai/1729511271a1204039.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论