element-ui实现多级checkbox关联选择（权限管理） - 悦读

1、依赖element-ui，只是使用了el-checkbox，可以很轻松替换掉

效果图：

图片描述


<template>
  <app-scroll-box class="page-clientsManage">
    <el-row class="pa-20">
      <el-card class="table-card mt-20">
        <el-row slot="header" class="clearfix">
          <el-row class="fl">
            <span class="title">疫区设置：{
   { itemTitle }}</span>
          </el-row>
        </el-row>
        <div class="deliverySetting">
          <div class="deliverySetting-table" v-for="(item, idx) in countries" :key="idx">
            <div class="table-body" v-for="(pro, idx2) in item.pros" :key="idx2">
              <div class="first-col">
                <span
                  v-if="idx2 == 0"
                  style="display: inline-block; line-height: 30px; cursor: pointer; "
                >
                  <el-checkbox @change="handleChecked('country', item)" :label="item.cname" v-model="item.checked" :key="item.cid">{
   { item.cname }}</el-checkbox>
                </span>
              </div>
              <div class="width120">
                <span style="display: inline-block; line-height: 30px; cursor: pointer; ">
                  <el-checkbox @change="handleChecked('pro', pro)" :label="pro.pname" v-model="pro.checked" :key="pro.pid">{
   { pro.pname }}</el-checkbox>
                </span>
              </div>
              <div class=