element 使用手风琴和多选框开发分配权限功能，支持多选（基于VUE）

先上图!

需求：手风琴默认展开当前按钮的全部，然后支持多选，

上代码：

<template>
  <div class="authorityDistribution">
    <div class="authorityDistribution-tabs">
      <el-button v-for="(item, index) in sysList" :key="item.fid" @click="changelable(item,index)"
                 :type="activeLabe==index?'primary':''">
        {{ item.sysName }}
      </el-button>
    </div>
    <div v-for="(citem, cindex) in sysList" :key="cindex">
      <div v-show="activeLabe==cindex" style="padding-top: 55px">
        <div v-if="citem.sysMenuList.length>0">
          <el-collapse v-model="activeNames">
            <el-collapse-item :name="sysMenuItem.menuName" v-for=" (sysMenuItem,sysMenuIndex) in citem.sysMenuList"
                              :key="sysMenuIndex">
              <template slot="title">
                <div style="padding-left: 10px">{{ sysMenuItem.menuName }}</div>
                <div style="position: absolute;right: 30px" @click="stopProp">
                            <el-switch v-model="sysMenuItem.isPick" active-color="#03A9F4" width="60"
                                       inactive-color="#ededed" @change="changeAll(sysMenuItem)">
                            </el-switch>
                </div>
              </template>
              <div style="margin-bottom: 10px" v-for=" (sysMenChildItem,sysMenChildIndex) in sysMenuItem.sysMenuList"
                   :key="sysMenChildIndex">
                <el-checkbox :indeterminate="sysMenChildItem.isIndeterminate" v-model="sysMenChildItem.isPick" @change="changeSysMentem(sysMenuItem,sysMenChildItem)">
                  {{ sysMenChildItem.menuName }}
                </el-checkbox>
                <div class="style-btn">
                    <el-checkbox v-model="fourItem.isPick"
                                 v-for="(fourItem,fourIndex) in sysMenChildItem.sysMenuList" :key="fourIndex"
                                 @change="changeFourItem(sysMenuItem,sysMenChildItem)">{{ fourItem.menuName }}
                    </el-checkbox>


                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div v-else style="display: flex;align-items: center;justify-content: center;padding-top: 10%">
          <div>暂无权限列表</div>
        </div>
      </div>
    </div>
    <div class="authorityDistribution-footer">
      <el-button type="primary" @click="saveMthod">保存</el-button>
      <el-button @click="deleteRouteMethod">取消</el-button>
    </div>
  </div>
</template>

<script>
import {
  querySysMenuBindResourceBySystem,
  querySystemByUser,
  querySystemByRoleId,
  roleBindMenu,
  querySystemMenuByRoleId
} from '@/api/management/organizationManagement'

export default {
  name: 'maAuthorityDistribution',
  data() {
    return {
      roleId: '',
      sysList: [],
      activeLabe: 0,
      activeNames: [],
      setTimeoutFlag:null,
    }
  },
  methods: {
    stopProp(e){
      e.stopPropagation()
    },
    //点击全选
    changeAll(allItem) {
      allItem.sysMenuList.forEach(item => {
        item.isPick = allItem.isPick;
        item.isIndeterminate = false;
        item.sysMenuList.forEach(buttonItem => {
          buttonItem.isPick = allItem.isPick;

        })
      })
    },
    //当前页
    changeSysMentem(personItem, item) {
      //改变全选按钮的状态
      let allNum=0;
      personItem.sysMenuList.forEach(item=>{
        if(!item.isIndeterminate && item.isPick){
          allNum++
        }
      })
      if(allNum==personItem.sysMenuList.length){
        personItem.isPick=true
      }else {
        personItem.isPick=false
      }
      //下一级
      if(item.sysMenuList && item.sysMenuList.length>0){
        item.sysMenuList.forEach(buttonItem => {
          if (item.isPick) {
            buttonItem.isPick = true
          } else {
            buttonItem.isPick = false
          }
        })
        this.changeFourItem(personItem, item)
      }

    },
    changeFourItem(item, sonItem) {
      //改变全选的状态
      let isPickNum=0;
      let isThreePickNum=0;
      let actionPickNum=0;
      if(sonItem && sonItem.sysMenuList.length>0){
        sonItem.sysMenuList.forEach(sysItem => {
          if (sysItem.isPick) {
            sonItem.isPick = true
            sonItem.isIndeterminate=true
            actionPickNum++
          }else {
            isThreePickNum++
          }
        })
      }
      if(sonItem){
        if (isThreePickNum == sonItem.sysMenuList.length) {
          sonItem.isPick = false
          sonItem.isIndeterminate = false

        }
        if (actionPickNum == sonItem.sysMenuList.length) {
          sonItem.isIndeterminate = false
        }
      }
      //改变全选
      item.sysMenuList.forEach(sysItem => {
        if (!sysItem.isIndeterminate && sysItem.isPick) {
          isPickNum++
        }
      })
      if(isPickNum==item.sysMenuList.length){
        item.isPick=true
      }else {
        item.isPick=false
      }

    },
    changelable(item, index) {
      this.activeLabe = index;
      this.activeNames = [];
      //根据名字默认展开当前系统全部数据
      item.sysMenuList.forEach(sysMenuItem => {
        this.activeNames.push(sysMenuItem.menuName);
      })
    },
    saveMthod() {
      // this.openModal();
      let arr=[];
      let postArr=[];
      //获取打勾的id,如果子级没有勾选,父级id就不存，否则连父级节点id加上
      //一级切换按钮
      this.sysList.forEach(item=>{
        //二级菜单
        item.sysMenuList.forEach(sysMenuItem=>{
          //三级菜单页面
          sysMenuItem.sysMenuList.forEach(chuldItem=>{
            if(chuldItem.isPick){
              if(arr.includes(sysMenuItem.fid)==false){
                arr.push(sysMenuItem.fid)
              }
              arr.push(chuldItem.fid)
            }
            if(chuldItem && chuldItem.sysMenuList.length>0){
              chuldItem.sysMenuList.forEach(lastItem=>{
                if(lastItem.isPick){
                  if(arr.includes(sysMenuItem.fid)==false){
                    arr.push(chuldItem.fid)
                    arr.push(sysMenuItem.fid)
                  }
                  arr.push(lastItem.fid)
                }
              })
            }
          })
        })
      })
      arr.forEach(item=>{
        postArr.push({
          resourcesId:item
        })
      })
      console.log('adasd',postArr)
      // return;
      roleBindMenu({
        roleId: this.roleId,
        menuList: postArr
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success('分配权限成功')
          this.setTimeoutFlag= setTimeout(()=>{
            this.colseModal();
            this.deleteRouteMethod()
          },1000)
        } else {
          this.colseModal();
          this.$message.success('分配权限失败')
        }
      })
    },
    deleteRouteMethod() {
      this.$deleteRoute(this)
    },
  },
  destroyed() {
    clearTimeout(this.setTimeoutFlag)
  },
  created() {
    //新版
    this.roleId = this.$route.params.fid
    this.openModal();
    querySystemMenuByRoleId({
      roleId: this.roleId
    }).then(res => {
      if (res.data.code == 200) {
        this.colseModal();
        this.sysList = res.data.data;
        res.data.data[0].sysMenuList.forEach(item => {
          this.activeNames.push(item.menuName)
        })
        //添加默认
        this.sysList.forEach(item => {
          item.sysMenuList.forEach(towItem=>{
            towItem.sysMenuList.forEach(threeItem=>{
              //这是第三级默认
              if(threeItem.sysMenuList.length>0){
                threeItem.sysMenuList.forEach(fourItem=>{
                  this.changeFourItem(towItem, threeItem)
                })
              }else {
                this.changeSysMentem(towItem,threeItem)
              }

            })
          })
        })
      }
    }).catch(res=>{
      this.colseModal();
    })
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-switch__core {
  height: 25px;
}
/deep/ .el-switch__core::after{
  width: 18px;
  height: 18px;
  top: 3px;

}
/deep/ .el-switch.is-checked .el-switch__core::after{
  margin-left: -20px;
}
.style-btn {
  padding-left: 20px;
  padding-top: 10px;
  display: flex;
  align-items: center
}

.authorityDistribution {
  padding-bottom: 50px;

  &-tabs {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    position: fixed;
    background: #FFFFFF;
    margin-top: -10px;
    padding-top: 10px;
    z-index: 1111;
  }

  &-body {
    width: 100%;
    position: relative;
  }

  &-footer {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 50px;
    left: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-item {
    width: 100%;

    &-head {
      height: 46px;
      border-bottom: 1px solid #ededed;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      font-weight: bold;
    }

    &-body {
      padding: 15px 0;
      font-size: 16px;

      & /deep/ .el-checkbox {
        margin-bottom: 10px;
      }

      & /deep/ .el-checkbox__label {
        font-weight: bold;
      }
    }
  }
}
</style>

数据格式多维数组把子集sysMenuList换成你的chuildList就行了，这里只做了三级，有不好的地方大家给我指出来改正一下。
总之是根据isIndeterminate 和isPick来做状态的改变，你也可以自己定义。当前这只是三级而已，我懒不想写了，如果再多级的话就要用递归啦。按自己需求修改一下，能用的，哈哈哈