vue3制作一个嵌套的折叠面板

封装一个折叠面板的组件，分为上下两个部分 根据后端数据有无children判断是否要嵌一个这个组件,然后再处理一下折叠,处理一下border-radius样式就ok了.

<template>  
<div v-if="node">  
<div v-for="(item,index) in node">  
<div @click.stop="changeCollapse(item)">  
<div :style="getTopStyle(item,index,node)" class="top_area">  
<img v-if="!item.isCollapse" src="@/assets/arrow/arrow-right.png">  
<img v-else src="@/assets/arrow/arrow-down.png">  
<div> {{ item.name }}</div>  
</div>  
<!--折叠部分-->  
<div v-show="item.isCollapse" :class="index == (node.length -1) ? 'bottom_area bottom_round': 'bottom_area'">  
<div v-if="!item.children">{{ item.pdfUrl }}</div>  
<div v-if="item.children">  
<CollapseItem :node="item.children"></CollapseItem>  
</div>  
</div>  
</div>  
</div>  
</div>  
</template>  
<script setup>  
import {ref, reactive} from "vue";  
import {computed} from "vue"  
  
defineOptions({  
name: "CollapseItem",  
inheritAttrs: false,  
});  
  
//传进来要处理的item  
const props = defineProps({  
node: {  
type: Object,  
default: "",  
}  
});  
  
console.log(props.item, "props.item")  
  
//切换折叠状态  
function changeCollapse(item) {  
console.log(item, "改变的弄得")  
if (!item.isCollapse) {  
item.isCollapse = true  
} else {  
item.isCollapse = false  
}  
}  
  
  
function getTopStyle(item, index, node) {  
if (!item.isCollapse && item.parentId != 0) {  
return "border-radius: 12px 12px 12px 12px;"  
}  
if (index == 0) {  
return "border-radius: 12px 12px 0 0;"  
}  
if (index == (node.length - 1) && !item.isCollapse) {  
return "border-radius: 0 0 12px 12px;"  
}  
  
}  
</script>  
<style lang="scss">  
.top_area {  
background: #F6F8FC;  
padding: 12px 16px;  
border: 1px solid #EAECF2;  
display: flex;  
align-items: center;  
  
img {  
width: 14px;  
height: 14px;  
margin-right: 8px;  
}  
}  
  
  
.bottom_area {  
background-color: #fff;  
padding: 16px;  
font-size: 14px;  
line-height: 22px;  
color: #1C1E24;  
border: 1px solid #EAECF2;  
}  
  
.bottom_round {  
border-radius: 0 0 12px 12px  
}  
</style>

<!--折叠面板-->  
    <CollapseItem :node="list">  
    </CollapseItem>
    
    //折叠数据
    const list = ref([{  
        "id": 1,  
        "sppId": "1",  
        "parentId": 0,  
        "name": "第一章",  
        "pdfUrl": "cessshi.url",  
        "sort": 0,  
        "status": "0",  
        "createBy": "",  
        "createTime": null,  
        "updateBy": "",  
        "updateTime": "2024-11-26 18:18:05",  
        "remark": null,  
        "children": [{  
        "id": 2,  
        "sppId": "1",  
        "parentId": 1,  
        "name": "第一章1",  
        "pdfUrl": "ceshi.url",  
        "sort": 0,  
        "status": "0",  
        "createBy": "",  
        "createTime": null,  
        "updateBy": "",  
        "updateTime": null,  
        "remark": null,  
        "children": [{  
            "id": 5,  
            "sppId": "1",  
            "parentId": 2,  
            "name": "1.1",  
            "pdfUrl": "adsjajds.url",  
            "sort": 1,  
            "status": "0",  
            "createBy": "",  
            "createTime": "2024-11-26 18:14:18",  
            "updateBy": "",  
            "updateTime": null,  
            "remark": null,  
        "children": null  
            }]  
        }]  
}, {  
        "id": 3,  
        "sppId": "1",  
        "parentId": 0,  
        "name": "第二章",  
        "pdfUrl": "ceshi.url",  
        "sort": 1,  
        "status": "0",  
        "createBy": "",  
        "createTime": "2024-11-26 17:36:19",  
        "updateBy": "",  
        "updateTime": "2024-11-26 17:43:57",  
        "remark": null,  
        "children": null  
        }, {  
            "id": 4,  
            "sppId": "1",  
            "parentId": 0,  
            "name": "第三章",  
            "pdfUrl": "cezadad.url",  
            "sort": 0,  
            "status": "1",  
            "createBy": "",  
            "createTime": "2024-11-26 17:44:24",  
            "updateBy": "",  
            "updateTime": "2024-11-26 18:09:40",  
            "remark": null,  
            "children": null  
    }])