83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template>
|
|
<div class="category-tree">
|
|
<el-tree
|
|
:data="data"
|
|
node-key="uid"
|
|
:props="{
|
|
children: 'children',
|
|
label: 'title'
|
|
}"
|
|
:current-node-key="selected"
|
|
:highlight-current="true"
|
|
:default-expand-all="true"
|
|
:expand-on-click-node="false"
|
|
>
|
|
<template #default="{ data }">
|
|
<nuxt-link :to="data.uri">{{ data.title }}</nuxt-link>
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CategoryTree',
|
|
props: {
|
|
// 栏目树结构
|
|
data : {},
|
|
// 选中的节点唯一标识
|
|
selected: {}
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.category-tree {
|
|
height: 800px;
|
|
background-color: var(--background-color);
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
:deep(.el-tree) {
|
|
--el-tree-node-content-height: auto;
|
|
background-color: var(--background-color);
|
|
.el-tree-node__content {
|
|
border-radius: 8px;
|
|
a {
|
|
height: 100%;
|
|
min-height: 50px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
text-wrap: initial;
|
|
}
|
|
.el-tree-node__expand-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
// 选中状态
|
|
.is-current {
|
|
& > .el-tree-node__content {
|
|
background-color: var(--primary-color-light);
|
|
color: var(--color-white);
|
|
a {
|
|
color: var(--color-white) !important;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
color: var(--font-color) !important;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|