效果图:
<template>
<el-collapse class="coll-wrap">
<div v-for="(item, i) in dataList" :key="i">
<el-collapse-item
v-if="item.children.length"
:title="item.title"
:name="i"
>
<asideBarItem v-if="item.children.length" :dataList="item.children" />
</el-collapse-item>
<div class="item" v-else>{{ item.title }}</div>
</div>
</el-collapse>
</template>
<script>
export default {
name: "asideBarItem",
props: {
dataList: {
type: Array,
default: () => [
{
title: "这是1级目录",
children: [
{
title: "1.1",
children: [],
},
{
title: "1.2",
children: [
{
title: "1.2.1",
children: [
{
title: "1.2.1.1",
children: [],
},
],
},
],
},
],
},
{
title: "这是2级目录",
children: [],
},
],
},
},
data() {
return {};
},
mounted() {},
};
</script>
<style scoped>
.coll-wrap /deep/ .el-collapse-item__content {
padding-bottom: 0 !important;
}
.coll-wrap /deep/ .el-collapse-item__wrap {
border: 0 !important;
}
.item{
padding: 15px 0;
}
</style>