1.实现效果


2.需求分析

主要用于平台各个部门不同权限的操作，将指定的账号放到对应的权限部门下，然后根据后台返回的账号信息，显示对应的模块；
复制代码


3.直接上代码

更多elementUI详情​

模板使用：

-解析-

（1）indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果；

（2）v-modal绑定的是数据中改项的布尔值，用于显示是否勾选的状态；

（3）@change的事件中，用来根据第一级的选择状态处理子级的选中状态；

<template>
  <el-checkbox  :label="item.id" :indeterminate="!item.checkAll" 
       v-model="item.checkAll" @change="handleCheckAllChange(item)" > {{item.title}}
  </el-checkbox>
        <el-checkbox-group  class="sonItem"  v-model="item.checkedCities"   
           @change="handleCheckedCitiesChange(item)">
                <el-checkbox v-for="items in item.child" :label="items.cid" :key="items.cid">
                   {{items.name}}
                 </el-checkbox>
        </el-checkbox-group>
</template>
复制代码


数据处理：

-解析：-

checkAll:判断母项是否被全选的状态；checkedCities:存储选中项，发送给后台； 

 data(){
      return {
      itemOptions: [
          {
            title: "商品管理", id: "shangpin",  checkAll:false,checkedCities:[],
            child: [
              {name: '商品管理', cid: 'Commodityanagement'},
              {name: '分类管理', cid: 'ClassificationManagement'}, {
              name: '品牌管理', cid: 'BrandManagement'},
              {name: '评价管理', cid: 'ManagementConsulting'},
              ],
          },
          {title: '交易管理', id: "jiaoyi",checkAll:false,checkedCities:[],
            child: [
              {name: "订单管理", cid: 'orderManagement'},
              {name: "退货处理", cid: "returnManagement"},
              {name: "异议处理", cid: "ObjectionHandling"},
              ]
          },
          {
            title: '会员管理', id: "huiyuan",checkAll:false,checkedCities:[],
            child: [
              {name: "会员管理", cid: 'MemberManagement'},
              {name: "会员等级", cid: "MembershipGrade"},
              {name: "会员积分", cid: "MemberIntegral"},
              {name: "积分规则", cid: 'IntegralRules'},
            ]
          },
        ],
              }
    },
复制代码


方法处理：

    methods:{
//        全选按钮
      handleCheckAllChange(item) {
        if(item.checkAll==true){
          for(var i=0;i<item.child.length;i++){
            item.checkedCities.push(item.child[i].cid);
          }
        }else{
          item.checkedCities=[];
        }
      },
//      单选按钮
      handleCheckedCitiesChange(item) {
        if(item.checkedCities.length==item.child.length){
          item.checkAll=true;
        }else{
          item.checkAll=false;
        }
      },
 }
复制代码