一、数据结构(无限级)
二、父组件
样式公共部分点这里 https://blog.csdn.net/qq_36529240/article/details/123506889
<div class="anwer-box">
<TreeList
:treeItem="treeItem"
></TreeList>
</div>
//js
import TreeList from './treeItem/index.vue'
components: {
TreeList,
},
三、子组件
关键还是子组件循环调用自己
值得注意的地方就是需要加 name: “TreeList”,不然无法区分是调用的自己
<template>
<div>
<div v-for="(data, ind) in treeItem" :key="ind">
<div class="anwer-box-ul">
<div class="dis-flex justify-between">
<div class="dis-flex">
<span class="fs-12">{{ data.numberUserName }}:</span>
<span class="fs-12" style="padding-left: 15px">{{
data.content
}}</span>
</div>
<span class="fs-12 cr-999">{{ data.updateTime | timeago }}</span>
</div>
<div class="dis-flex justify-between problem-box-right-icon">
<div class="dis-flex items-center right-icon">
<div class="" @click="anwerShow(data)">
{{ data.numberAnswers }}人回答
</div>
<div class="dis-flex items-center" @click="problemaZan(data)">
<span
class="icon iconfont fs-18"
:class="{ 'cr-blue': data.isGive == 1 }"
></span
>
<span class="num" :class="{ 'cr-blue': data.isGive == 1 }">{{
data.numberLikes
}}</span>
</div>
</div>
<div
class="my-anwer dis-flex items-center"
v-if="userId != data.memberUserId"
>
<span class="icon iconfont cr-999"></span>
<span class="num fs-14 cr-999" @click="anwerMyClick(data)"
>我的回答</span
>
</div>
</div>
</div>
<TreeList
class="item"
v-if="data.flag"
:key="'son' + data.id"
:treeItem="data.children"
></TreeList>
</div>
</div>
</template>
<script>
export default {
name: 'TreeList',
props: {
treeItem: {
type: [],
default() {
return []
},
},
},
data: function () {
return {
userId: '123456',//用户id
}
},
computed: {},
created() {
//console.log(this.treeItem)
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.problem-box-ul {
img {
width: 40px;
height: 40px;
border-radius: 20px;
}
.problem-box-right {
width: 760px;
padding-left: 15px;
.name {
font-size: 13px;
padding-bottom: 10px;
}
.problem-box-right-icon {
padding-top: 20px;
.right-icon {
.num {
padding-left: 5px;
}
div {
cursor: pointer;
margin-right: 93px;
font-size: 14px;
color: #998;
&:hover {
color: #409eff;
}
}
}
.my-anwer {
cursor: pointer;
.num {
padding-left: 5px;
}
&:hover {
span {
color: #409eff;
}
}
}
}
}
}
.anwer-box-ul {
height: 40px;
width: 100%;
padding: 10px;
margin-top: 5px;
background: rgba(0, 0, 0, 0.03);
.problem-box-right-icon {
padding-top: 8px;
}
}
</style>
完结
(后续变动会继续写到其他文章。比如:数据过多卡顿时,接口只返回第一层数据,然后点击按钮,查询子级并插入到父级children)