vue+Element-ui三級嵌套勾選、全選

<template>
  <div>
    <template>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-for="item in tableData " :key="item.id" :label="item.name" :name="item.id">
          <el-checkbox
            style="font-weight:600;margin-bottom:15px"
            v-model="menusIds"
            :label="item.id"
            @change="handleCheck(item.id)"
          >全選</el-checkbox>

          <div class="checkbox-table" v-for="(items, indexkey) in item.children" :key="items.id">
            <template>
              <el-checkbox
                class="check1"
                style="font-weight:600;margin-bottom: 15px"
                v-model="menusIds"
                :label="items.id"
                @change="handleCheck(1,indexkey)"
              >{{items.name}}</el-checkbox>
              <div style="margin-bottom: 20px;">
                <div
                  v-for="itemss in items.children"
                  class="line-check"
                  :key="itemss.id"
                  style="display: inline-block; margin-left: 20px;margin-bottom: 20px;"
                >
                  <el-checkbox
                    class="check2"
                    @change="handleCheck(2,indexkey)"
                    v-model="menusIds"
                    :label="itemss.id"
                  >{{itemss.name}}</el-checkbox>
                </div>
              </div>
            </template>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: '', // 所有的菜單數組，
      activeName: '4',
      menusIds: [], // 已選的菜單id數組
      currentTabIndex: 1,
      firstId: null
    }
  },
  methods: {
    handleClick (tab, event) {
      this.firstId = tab.name // 一級菜單id
      this.currentTabIndex = tab.index
    },
    // 獲取權限所有角色
    getid () {
      let res = {
        'result': [
          {
            'id': '3',
            'confirm_no': 'SY_WDZC',
            'name': '我的資產'
          },
          {
            'id': '4',
            'confirm_no': 'SYS_MANAGE',
            'name': '系統管理',
            'children': [
              {
                'id': '5',
                'confirm_no': 'SYS_MANAGE_MENU',
                'name': '菜單管理',
                'children': [
                  {
                    'id': '6',
                    'confirm_no': 'SYS_MANAGE_MENU_ADD',
                    'name': '添加菜單'
                  },
                  {
                    'id': '17',
                    'confirm_no': 'SYS_MANAGE_MENU_EDIT',
                    'name': '修改菜單'
                  },
                  {
                    'id': '44',
                    'confirm_no': 'SYS_MANAGE_MENU_ADD',
                    'name': '新增菜單'
                  }
                ]
              },
              {
                'id': '10',
                'confirm_no': 'SYS_MANAGE_ZJGL',
                'name': '值集管理'
              },
              {
                'id': '11',
                'confirm_no': 'SYS_MANAGE_QXGL',
                'name': '權限管理'
              },
              {
                'id': '12',
                'confirm_no': 'SYS_MANAGE_ JSGL',
                'name': '角色管理'
              },
              {
                'id': '13',
                'confirm_no': 'SYS_MANAGE_GNGL',
                'name': '功能管理'
              },
              {
                'id': '14',
                'confirm_no': 'SYS_MANAGE_YLGL',
                'name': '用戶管理'
              },
              {
                'id': '15',
                'confirm_no': 'SYS_TEAM _WDTD',
                'name': '日誌管理'
              }
            ]
          },
          {
            'id': '16',
            'confirm_no': 'SYS_TEAM',
            'name': '團隊管理',
            'children': [
              {
                'id': '18',
                'confirm_no': 'SYS_TEAM _WDTD',
                'name': '我的團隊'
              },
              {
                'id': '19',
                'confirm_no': 'SYS_TEAM_QYTD',
                'name': '區域團隊'
              },
              {
                'id': '20',
                'confirm_no': 'SYS_TEAM_TDLB',
                'name': '團隊列表'
              },
              {
                'id': '21',
                'confirm_no': 'SYS_TEAM_QY',
                'name': '支付代理區域劃分'
              },
              {
                'id': '22',
                'confirm_no': 'SYS_TEAM_ADD',
                'name': '添加成員'
              }
            ]
          },
          {
            'id': '23',
            'confirm_no': 'SYS_BUSINESS',
            'name': '商家管理',
            'children': [
              {
                'id': '24',
                'confirm_no': 'SYS_BUSINESS_TDGL',
                'name': '團隊商家'
              },
              {
                'id': '25',
                'confirm_no': 'SYS_BUSINESS_QYSJ',
                'name': '區域商家'
              },
              {
                'id': '26',
                'confirm_no': 'SYS_BUSINESS_ADDBUS',
                'name': '添加商家'
              },
              {
                'id': '27',
                'confirm_no': 'SYS_BUSINESS_SHOP',
                'name': '門店管理'
              },
              {
                'id': '28',
                'confirm_no': 'SYS_BUSINESS_MEND',
                'name': '添加門店'
              }
            ]
          },
          {
            'id': '29',
            'confirm_no': 'SYS_FLOW',
            'name': '流水管理',
            'children': [
              {
                'id': '30',
                'confirm_no': 'SYS_FLOW_LSQD',
                'name': '流水清單'
              },
              {
                'id': '31',
                'confirm_no': 'SYS_FLOW_LSTJ',
                'name': '流水統計'
              },
              {
                'id': '32',
                'confirm_no': 'SYS_FLOW _LSBJ',
                'name': '流水報警'
              }
            ]
          },
          {
            'id': '33',
            'confirm_no': 'SYS_AUDI',
            'name': '審覈管理',
            'children': [
              {
                'id': '34',
                'confirm_no': 'SYS_AUDI_HYSH',
                'name': '會員審覈'
              },
              {
                'id': '35',
                'confirm_no': 'SYS_AUDI_SJSH',
                'name': '商家審覈'
              },
              {
                'id': '36',
                'confirm_no': 'SYS_AUDI_MDSH',
                'name': '門店審覈'
              },
              {
                'id': '37',
                'confirm_no': 'SYS_AUDI_TXSH',
                'name': '提現審覈'
              }
            ]
          },
          {
            'id': '38',
            'confirm_no': 'SYS_APPLE',
            'name': '審覈申請',
            'children': [
              {
                'id': '39',
                'confirm_no': 'SYS_APPLE_HYSQ',
                'name': '會員申請'
              },
              {
                'id': '40',
                'confirm_no': 'SYS_APPLE_SJSQ',
                'name': '商家申請'
              },
              {
                'id': '41',
                'confirm_no': 'SYS_APPLE_MDSQ',
                'name': '門店申請'
              }
            ]
          },
          {
            'id': '42',
            'confirm_no': 'SYS_INFO',
            'name': '信息管理',
            'children': [
              {
                'id': '43',
                'confirm_no': 'SYS_INFO_USER',
                'name': '個人信息'
              }
            ]
          }
        ],
        'info': '數據查詢成功！',
        'code': 100000
      }
      this.tableData = res.result

      let selectedResponse = {
        'result': [
          {
            'id': '5',
            'confirm_no': 'SYS_MANAGE_MENU',
            'name': '菜單管理'
          },
          {
            'id': '6',
            'confirm_no': 'SYS_MANAGE_MENU_ADD',
            'name': '添加菜單'
          },
          {
            'id': '10',
            'confirm_no': 'SYS_MANAGE_ZJGL',
            'name': '值集管理'
          },
          {
            'id': '12',
            'confirm_no': 'SYS_MANAGE_ JSGL',
            'name': '角色管理'
          },
          {
            'id': '13',
            'confirm_no': 'SYS_MANAGE_GNGL',
            'name': '功能管理'
          },
          {
            'id': '17',
            'confirm_no': 'SYS_MANAGE_MENU_EDIT',
            'name': '修改菜單'
          },
          {
            'id': '44',
            'confirm_no': 'SYS_MANAGE_MENU_ADD',
            'name': '新增菜單'
          },
          {
            'id': '18',
            'confirm_no': 'SYS_TEAM _WDTD',
            'name': '我的團隊'
          },
          {
            'id': '19',
            'confirm_no': 'SYS_TEAM_QYTD',
            'name': '區域團隊'
          },
          {
            'id': '20',
            'confirm_no': 'SYS_TEAM_TDLB',
            'name': '團隊列表'
          }
        ],
        'info': '數據查詢成功！',
        'code': 100000
      }
      this.menusIds = []
      selectedResponse.result.forEach(item => {
        this.menusIds.push(item.id)
      })
    },

    handleCheck (type, a) {
       console.log(this.menusIds)
      this.menu = this.tableData[this.currentTabIndex].children

      if (a === undefined) {
        if (this.menusIds[this.menusIds.length - 1] === type) {
          this.menu.forEach((item, index) => { // 如果要存的menusIds裏的id沒有，需要循環獲取全部id並且把id存進要傳的menusIds數組裏
            if (this.menusIds.indexOf(item.id) < 0) {
              this.menusIds.push(item.id)
            }
            this.handleCheck(1, index) // 遞歸一下點擊二級菜單的時候
          })
        } else {
          // 只取消當前tab下的菜單
          this.menu.forEach((item, index) => {
            if (this.menusIds.indexOf(item.id) > -1) {
              this.menusIds.splice(this.menusIds.indexOf(item.id), 1)
            }
            this.handleCheck(1, index) // 遞歸一下點擊二級菜單的時候
          })
        }
      }

      if (type == 1) { // 二級菜單點擊
        if (Array.isArray(this.menu[a].children)) { // 在使用前判斷是否是數組,如果是數組就執行裏面的邏輯,Array.isArray() 用於確定傳遞的值是否是一個 Array。
          if (this.menusIds.indexOf(this.menu[a].id) > -1) {
            this.menu[a].children.map(item => {
              if (this.menusIds.findIndex((n) => n == item.id) < 0) {
                this.menusIds.push(item.id)
              }
            })
          } else {
            this.menu[a].children.map(item => {
              if (this.menusIds.findIndex((n) => n == item.id) > -1) {
                this.menusIds.splice(this.menusIds.findIndex((n) => n == item.id), 1)
              }
            })
          }
        }
      }

      if (type == 2) { // 三級菜單點擊
        let index = 0
        this.menu[a].children.map(item => {
          if (this.menusIds.indexOf(item.id) > -1) {
            index += 1
          }
        })
        if (index > 0) {
          if (this.menusIds.indexOf(this.menu[a].id) < 0) {
            this.menusIds.push(this.menu[a].id)
          }
        } else {
          if (this.menusIds.indexOf(this.menu[a].id) > -1) {
            this.menusIds.splice(this.menusIds.indexOf(this.menu[a].id), 1)
          }
        }
      }
    }

  },
  created: function () {
    this.getid()
  }
}
</script>

<style lang="scss" scoped>
.el-checkbox + .el-checkbox {
  margin-left: 0px;
}
.el-checkbox {
  margin-right: 25px;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #c79f5e !important;
  border-color: #c79f5e !important;
}
.el-checkbox__inner:hover {
  border-color: #c79f5e !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #c79f5e !important;
}
.el-checkbox + .el-checkbox {
  margin-left: 0px;
}
.el-checkbox {
  margin-right: 25px;
}
.second {
  width: 92%;
  margin: 0 auto;
  height: 46px;
  background: #f1f6f9;
  box-sizing: border-box;
  line-height: 46px;
  padding: 0 20px;
  font-size: 16px;
}
.Levelthree {
  width: 92%;
  line-height: 40px;
  margin: 0 auto;
}
</style>