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>
类似资料：