通过复选框控制折叠面板的打开与关闭 |
您所在的位置：网站首页 › vue饿了么多选点击全部选了 › 通过复选框控制折叠面板的打开与关闭 |
通过复选框控制折叠面板的打开与关闭
|
饿了么框架大家使用的都比较多，今天介绍一个关于折叠面板的业务场景： 默认的折叠面板单击就可打开，业务要求通过复选框控制折叠面板的打开 如图是默认的折叠面板展示：
代码如下： // name='1' 就是当前折叠面板对应的值 转学科 //通过change事件将当前面板的值传递进行 {{item.name}}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里面存储的值去掉，当前面板就会关闭以上就是整个业务处理过程，其中还有不妥之处，请多指教。 |
下面这张图是修改为依靠复选框打开折叠面板的效果：
【本文地址】