60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="custom-menu-tree">
|
||
|
|
<template v-for="item in dataList">
|
||
|
|
<el-menu-item v-if="!item.children" :key="item.id" :index="String(item.id)">
|
||
|
|
<span class="tree-icon">
|
||
|
|
<i v-if="item.type === 'md'" class="el-icon-folder-opened" style="color: rgba(144, 198, 252, 1)" />
|
||
|
|
<i v-else class="el-icon-files" style="color: rgba(144, 198, 252, 1)" />
|
||
|
|
</span>
|
||
|
|
<span class="tree-name" :title="item.name">{{ item.name }}</span>
|
||
|
|
<slot name="menu" :menu-id="item.id" :type="item.type" :file-list="{ url: item.url, name: item.url, file_type: item.file_type }" />
|
||
|
|
</el-menu-item>
|
||
|
|
<el-submenu v-else :key="item.id" :index="String(item.id)">
|
||
|
|
<template slot="title">
|
||
|
|
<i :class="[item.icon]" />
|
||
|
|
<span>{{ item.name }}</span>
|
||
|
|
<slot name="submenu" :menu-data="item" :menu-id="item.id" />
|
||
|
|
</template>
|
||
|
|
<MenuTree :data-list="item.children">
|
||
|
|
<template slot="menu" scope="ctx">
|
||
|
|
<slot name="menu" :menu-id="ctx.menuId" :type="ctx.type" :file-list="ctx.fileList" />
|
||
|
|
</template>
|
||
|
|
<template slot="submenu" scope="ctx">
|
||
|
|
<slot name="submenu" :menu-data="ctx.menuData" :menu-id="ctx.menuId" />
|
||
|
|
</template>
|
||
|
|
</MenuTree>
|
||
|
|
</el-submenu>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'MenuTree',
|
||
|
|
props: {
|
||
|
|
dataList: { type: Array, default: () => [] }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
::v-deep .is-opened > .el-submenu__title {
|
||
|
|
border-left: 3px solid #409EFF;
|
||
|
|
}
|
||
|
|
.tree-name {
|
||
|
|
display: inline-block;
|
||
|
|
width: 58%;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.tree-icon {
|
||
|
|
background: rgba(232, 239, 248, 1);
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
padding: 0 0 2px 2px;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
</style>
|