##调用
<common-list
:titleArr="item.textArr"
:list="item.children"
:detph="0"
></common-list>
// 展示数据
list2: [
{
textArr: [{ name: "测试123" }],
children: [
{
textArr: [
{ name: "测试123" },
{ name: "区总监" },
{ name: "维持" },
{ name: "2023-03-31" },
{ name: "维持" },
{ name: "2023-03-31" },
],
},
{
textArr: [
{ name: "测试123" },
{ name: "区总监" },
{ name: "维持" },
{ name: "2023-03-31" },
{ name: "维持" },
{ name: "2023-03-31" },
],
},
],
},
{
textArr: [{ name: "测试456" }],
children: [
{
textArr: [
{ name: "测试123" },
{ name: "区总监" },
{ name: "维持" },
{ name: "2023-03-31" },
{ name: "维持" },
{ name: "2023-03-31" },
],
},
{
textArr: [
{ name: "测试123" },
{ name: "区总监" },
{ name: "维持" },
{ name: "2023-03-31" },
{ name: "维持" },
{ name: "2023-03-31" },
],
},
],
},
]
组件
<!-- -->
<template>
<div>
<div :style="getDetph">
<!-- 显示隐藏 -->
<div @click="getData">
<!-- 这里呢如果为真的话就显示那么就是减号否则的话就是加号 -->
<!-- <div v-for="(nameItem, nameIndex) in titleArr" :key="nameIndex">
<span>{{ detph == 0 ? "+" : "" }}</span
>{{ nameItem.name }}
</div> -->
<div class="accordion">
<div
class="accordion-item"
:class="{ bgItem0: detph == 0, bgItem1: detph == 5 }"
>
<p
:class="{ showBorder: textIndex == 0, fixBg: detph !== 0 }"
v-for="(textName, textIndex) in titleArr"
:key="textIndex"
>
<span>{{ textName.name }}</span>
<img
v-show="detph == 0"
class="accordion-item-arrow"
:src="isShow ? imgObj[0] : imgObj[1]"
/>
</p>
</div>
</div>
</div>
<!-- 那么在这里我们就需要改成 item.name和item.children -->
<div v-if="isShow">
<tree
:titleArr="item.textArr"
:list="item.children"
v-for="(item, index) in list"
:key="index"
:detph="detph + 1"
>
<!-- 每次递增1 -->
</tree>
</div>
</div>
</div>
</template>
<script>
export default {
name: "tree",
components: {},
data: function () {
return {
isShow: false,
imgObj: [
require("./imgs/arrow-up.png"),
require("./imgs/arrow-down.png"),
],
};
},
props: {
// 接收标题
titleArr: {
type: Array,
// default: "标题"
},
// 接收一整个数组
list: {
type: Array,
},
// 用来接收层数
detph: {
type: Number,
},
},
// 计算属性用来接收我们的层数
computed: {
getDetph() {
// return `transform:translate(${this.detph * 20}px)`;
},
},
methods: {
getData: function () {
this.isShow = !this.isShow;
},
},
};
</script>
<style lang="less" scoped>
.tabs {
padding-top: 1rem;
}
/deep/ .van-tabs__wrap {
// .van-tab__text {
// font-size: 0.16rem;
// color: #7e849f;
// }
.van-tab--active {
.van-tab__text {
color: #17204d;
font-weight: bold;
font-size: 0.16rem;
}
}
.van-tabs__line {
background: #336afc;
}
}
/deep/ .van-cell__right-icon {
display: none;
}
/deep/ .van-cell {
overflow: auto !important;
}
.tabsTitle {
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
display: grid;
&-title {
background: rgb(246, 248, 250);
display: inline-block;
width: 0.8rem;
padding-right: 0.08rem;
text-align: center;
vertical-align: top;
span {
font-weight: bold;
font-size: 0.12rem;
color: #555c80;
text-align: center;
white-space: normal;
height: 0.44rem;
width: 0.3rem;
display: flex;
align-items: center;
vertical-align: top;
justify-content: center;
}
}
}
// .collapseItem {
// width: 1rem;
// display: inline-block;
// text-align: center;
// vertical-align: top;
// background: rgba(246, 248, 250, 0.8);
// span {
// font-weight: bold;
// font-size: 0.12rem;
// color: #555c80;
// text-align: center;
// white-space: normal;
// height: 0.44rem;
// width: 0.3rem;
// display: flex;
// align-items: center;
// vertical-align: top;
// justify-content: center;
// }
// }
.accordion {
min-width: max-content;
&-item {
// width: 1rem;
height: 0.44rem;
display: flex;
align-items: center;
border-bottom: 1px solid #ebedf0;
position: relative;
p {
width: 0.8rem;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-right: 0.08rem;
}
.showBorder {
padding-left: 0.1rem;
width: 1rem;
border-right: 1px solid #c0cbe5;
justify-content: space-between;
position: sticky;
left: 0;
top: 0;
}
&-arrow {
width: 0.16rem;
height: 0.16rem;
}
}
}
.fixBg {
background: #fff;
}
.bgItem0 {
background: rgba(2, 95, 234, 0.14);
}
.bgItem1 {
background: rgba(2, 92, 234, 0.07);
}
</style>