1.组件式：chlide.vue代码：<template>
<div v-for="(item, index) in data" style="padding-left: 30px;margin-top:10px;" :key="index" class="div-item">
<div>
<div><img :src="item.header"></div>
<div>{{ item.nickName }}</div>
</div>
<div class="comment">{{ item.comment }}</div>
<AboutView v-if="item.children" :data="item.children" />
</div>
</template>
<script setup>
const props = defineProps({data: {type: Array}})
let data = props.data
</script>
<style scoped>
div {
list-style: none;
font-size: 12px;
}
.comment {
padding-left: 42px;
}
.div-item div:nth-child(1) {
display: flex;
}
.div-item div:nth-child(1) div {
margin-right: 10px;
line-height: 30px;
}
.div-item img {
width: 35px;
height: 35px;
border-radius: 50%;
}
</style>
2.父组件使用：import AboutView from './AboutView.vue'引入
获取数据:
onMounted(() => {
axios.get('https://console-mock.apipost.cn/app/mock/project/0e329381-88bf-462e-b4aa-c23ec21c12ad/chat/list').then(res => {
data.length = 0
data.push(...res.data)
})
})
使用：<AboutView :data="data" />
第二种
1.<div v-html="html"></div>
2.
let html = ref("")
function init() {
axios.get("https://console-mock.apipost.cn/app/mock/project/0e329381-88bf-462e-b4aa-c23ec21c12ad/chat/list").then(res => {
let { data } = res
html.value = newInit(data)
})
}
function newInit(data) {
let newArr = [];
data.forEach(item => {
let dom = ''
if (item.children) {
dom = `<div>
<div class="header">
<img src="${item.header}"/>
<div>${item.nickName}</div>
</div>
<div>
<div class="comment">${item.comment}</div>
<div style="margin-left:5%;">${newInit(item.children)}</div>
</div>
</div>`
} else {
return
}
newArr.push(dom)
})
return newArr
}
onMounted(() => {
init()
})
样式自己调整，目前只是基础示例实现，具体看公司业务