<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>element-ui的el-checkbox嵌套多選</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./ele.css">
</head>
<body>
<div id="app">
<div slot="content" style="width: 600px; padding: 0 40px;margin: 0 auto;">
<div class="checkbox-table" v-for="(item, indexkey) in menu" :key="item.id">
<template>
<el-checkbox class="check1" style="font-weight: 600;margin-bottom: 15px " v-model='menusIds' :label="item.id" @change='handleCheck(1,indexkey)'>
{{item.name}}
</el-checkbox>
<div style="margin-bottom: 20px;">
<div v-for="list in item.children" class="line-check" :key="list.id" style="display: inline-block; margin-left: 20px;margin-bottom: 20px;" >
<el-checkbox class="check2" @change='handleCheck(2,indexkey)' v-model="menusIds" :label="list.id">
{{list.name}}
</el-checkbox>
</div>
</div>
</template>
<div @click="test">提交</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.3/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
menu:[{
"id": 1,
"name": "首頁",
"ename": "home",
"path": "/home",
"pid": 0,
"children": []
},
{
"id": 2,
"name": "訂單",
"ename": "order-manage",
"path": "/order-manage",
"pid": 0,
"children": []
},
{
"id": 3,
"name": "導師管理",
"ename": "teacher-manage",
"path": "/teacher-manage",
"pid": 0,
"children": []
},
{
"id": 4,
"name": "課程管理",
"ename": "course-manage",
"path": "/course-manage",
"pid": 0,
"children": [{
"id": 5,
"name": "課程模板",
"path": "template",
"pid": 4,
"children": []
}, {
"id": 6,
"name": "課程列表",
"path": "list",
"pid": 4,
"children": []
}, {
"id": 7,
"name": "已歸檔課程",
"path": "archive-course",
"pid": 4,
"children": []
}]
},
{
"id": 8,
"name": "內容",
"ename": "content",
"path": "/content",
"pid": 0,
"children": [{
"id": 9,
"name": "廣告位",
"path": "banner",
"pid": 8,
"children": []
}, {
"id": 10,
"name": "關於我們",
"path": "about",
"pid": 8,
"children": []
}]
},
{
"id": 11,
"name": "用戶",
"ename": "user",
"path": "/user",
"pid": 0,
"children": [{
"id": 12,
"name": "用戶管理",
"path": "user-manage",
"pid": 11,
"children": []
}, {
"id": 13,
"name": "主辦方",
"path": "user-server",
"pid": 11,
"children": []
}, {
"id": 14,
"name": "組織者",
"path": "user-seller",
"pid": 11,
"children": []
}]
},
],
menusIds: []
}
},
methods: {
test(){
console.log(this.menusIds);
},
// 處理選擇事件
handleCheck(type, a = 0) { // 多選框
let self = this;
if (type == 2) { // 二級菜單點擊
let index = 0;
self.menu[a].children.map(item => {
if (self.menusIds.indexOf(item.id) > -1) {
index += 1;
}
})
if (index > 0) {
if (self.menusIds.indexOf(self.menu[a].id) < 0) {
self.menusIds.push(self.menu[a].id);
}
} else {
if (self.menusIds.indexOf(self.menu[a].id) > 0) {
self.menusIds.splice(self.menusIds.indexOf(self.menu[a].id), 1);
}
}
} else {
if (self.menusIds.indexOf(self.menu[a].id) > -1) {
self.menu[a].children.map(item => {
if (self.menusIds.findIndex((n) => n == item.id) < 0) {
self.menusIds.push(item.id)
}
})
} else {
self.menu[a].children.map(item => {
if (self.menusIds.findIndex((n) => n == item.id) > -1) {
self.menusIds.splice(self.menusIds.findIndex((n) => n == item.id), 1);
}
})
}
}
},
//編輯某個菜單
handleEdit(obj) {
let self = this;
self.obj = obj;
let array = obj.menuIds ? obj.menuIds.split(',') : []
let arr = [];
array.map(item => {
arr.push(parseInt(item));
})
this.menusIds = arr;
},
// 獲取所有菜單列表
async _allMenuApi() {
let res = await fetchRights();
if (res.code == 200) {
this.menu = res.data.allMenus;
}
}
}
})
</script>
</html>
