<template>
<div class="container">
<div class="routeList-box" v-for="(item,index) in routeList" :key="index">
<el-collapse v-model="activeNames">
<el-collapse-item :title="item.title" :name="index">
<el-tree
class="el-tree"
:data="item.list"
:render-content="renderContent"
show-checkbox
node-key="id"
ref="tree"
highlight-current
@node-expand="handleExpand"
:props="defaultProps"
></el-tree>
</el-collapse-item>
</el-collapse>
</div>
</div>
</template>
<script>
export default {
data() {
return {
routeList: [
{
title: "授權管理后台",
list: [
{
id: 1,
label: "京店寶",
children: [
{
id: 2,
label: "用戶分析",
children: [
{
id: 4,
label: "查詢次數",
children: [
{
id: 7,
label: "頁面查看權限"
},
{
id: 7,
label: "頁面查看權限"
},
{
id: 7,
label: "頁面查看權限"
},
{
id: 7,
label: "頁面查看權限"
},
{
id: 8,
label: "編輯"
}
]
},
{
id: 5,
label: "次數分布",
children: [
{
id: 9,
label: "次數分布child1"
},
{
id: 10,
label: "次數分布child2"
}
]
}
]
},
{
id: 3,
label: "系統性能",
children: [
{
id: 6,
label: "所用時間",
children: [
{
id: 7,
label: "頁面查看權限"
}
]
}
]
}
]
},
{
id: 111,
label: "有品庫",
children: [
{
id: 112,
label: "用戶數"
}
]
}
]
}
],
defaultProps: {
children: "children",
label: "label"
}
};
},
mounted() {
this.changeCss();
},
methods: {
handleExpand() {//節點被展開時觸發的事件
//因為該函數執行在renderContent函數之前，所以得加this.$nextTick()
this.$nextTick(()=>{
this.changeCss();
})
},
renderContent(h, { node, data, store }) {//樹節點的內容區的渲染 Function
let classname = "";
// 由於項目中有三級菜單也有四級級菜單，就要在此做出判斷
if (node.level === 4) {
classname = "foo";
}
if (node.level === 3 && node.childNodes.length === 0) {
classname = "foo";
}
return h(
"p",
{
class: classname
},
node.label
);
},
changeCss() {
var levelName = document.getElementsByClassName("foo"); // levelname是上面的最底層節點的名字
for (var i = 0; i < levelName.length; i++) {
// cssFloat 兼容 ie6-8 styleFloat 兼容ie9及標准瀏覽器
levelName[i].parentNode.style.cssFloat = "left"; // 最底層的節點，包括多選框和名字都讓他左浮動
levelName[i].parentNode.style.styleFloat = "left";
levelName[i].parentNode.onmouseover = function() {
this.style.backgroundColor = "#fff";
};
}
}
}
};
</script>
<style lang="scss" scoped>
.container {
width: 800px;
padding: 40px;
}
.routeList-box {
border-left: 1px solid #eee;
border-right: 1px solid #eee;
margin-bottom: 20px;
.el-tree {
margin: 12px 0;
}
/deep/.el-collapse-item__header {
height: 40px;
background-color: #f4f4f4;
padding: 0 10px;
}
/deep/.el-icon-arrow-right:before {
color: #409eff;
}
}
/deep/ .el-tree-node__content::before {
content: "";
padding-left: 10px;
}
/deep/.el-checkbox__input {
margin-right: 6px;
}
</style>