效果
使用组件递归,重复调用组件list, 为组件name命名,复用组件传入props list,递归使用组件进行渲染,
list 组件
<template>
<ul class="rightlist-container">
<li v-for="(item, i) in list" @click="handleClick(item)" :key="i">
<span :class="{ active: item.isSelect }">{{ item.name }}</span>
<RightList :list="item.children" @click="handleClick" />
</li>
</ul>
</template>
<script>
export default {
name: "RightList",
props: {
list: {
type: Array,
default: () => []
},
},
methods: {
handleClick(item) {
this.$emit("select", item);
}
},
}
</script>
<style lang="less" scoped>
@import "~@/styles/var.less";
.rightlist-container {
list-style: none;
padding: 0;
margin: 0;
.rightlist-container {
margin-left: 1em;
}
li {
min-height: 40px;
line-height: 40px;
cursor: pointer;
.active {
color: @warn;
font-weight: bold;
}
}
}
</style>
list-test 测试组件
<template>
<RightList :list="list" @select="handleSelect"></RightList>
</template>
<script>
import RightList from './RightList.vue';
export default {
components: {
RightList,
},
methods: {
handleSelect(item) {
console.log(item);
}
},
data() {
return {
list: [
{ name: "a", isSelect: false },
{ name: "b", isSelect: false },
{ name: "c", isSelect: true, children: [
{ name: "c1", isSelect: false },
{ name: "c2", isSelect: false },
{
name: "c3", isSelect: false, children: [
{ name: "c3-1", isSelect: false },
{ name: "c3-2", isSelect: true },
{ name: "c3-3", isSelect: false },
{ name: "c3-4", isSelect: false },
]
},
{ name: "c4", isSelect: false },
]
},
{ name: "d", isSelect: false },
]
}
},
}
</script>
<style lang="less" scoped></style>
