小程序中下拉菜单的不定项选择

需求：

针对团队内不同部门，不同人员的不定项选择。即可单选或者多选，并且可以跨部门。如下图

其中 A、B 同级， a、b 同级， 1、2 同级

思路：

利用 checkbox-group 组件的 bindchange 事件和表单组件的 name 属性。checkbox-group文档
当二级或者三级有一个没有被选中一级也不会被选中

代码：

wxml:

            <checkbox-group wx:for='{{list}}' wx:key='{{index}}' data-index='{{index}}' bindchange="checkOfficeChange">
                <view>
                  <label>
                    <checkbox value="{{item.name}}" checked="{{item.checked}}" />
                    {{item.name}}
                  </label>
                </view>
                <checkbox-group data-index='{{index}}' name="we{{index}}" bindchange="checkUserChange">
                  <view wx:for='{{item.user}}' wx:key='{{index}}'>
                    <label>
                      <checkbox value="{{item.id}}" checked="{{item.checked}}"/>
                      {{item.name}}
                    </label>
                  </view>
                </checkbox-group>
              </view>
            </checkbox-group>

由于直接粘贴过来的 wxml 可能会出现错误，但是整体结构就是这样。使用checkbox-group包裹checkbox，最后针对人员的被选择可以通过包裹人员的checkbox的checkbox-group中的name属性获取。

js：思路：就是判断当前a项是否被选中，进而做出不同操作针对a下所有项。反向操作亦是如此。

checkOfficeChange(e) {
  let a= this.data.a
  if (a[e.currentTarget.dataset.index].checked ==='checked'){
    a[e.currentTarget.dataset.index].checked = ''
    a[e.currentTarget.dataset.index].user.map(function (item) {
      item.checked = ''
      return item
    })
  }else{
    a[e.currentTarget.dataset.index].checked = 'checked'
    a[e.currentTarget.dataset.index].user.map(function (item) {
      item.checked = 'checked'
      return item
    })
  }
  let ischeck = a.filter(function(item){
    return item.checked===''
  })
  if (ischeck.length>0){
    a.checked=''
  }else{
    a.checked = 'checked'
  }
  this.setData({
    a: a
  })

},