需求
实现树状图,同级值展示一行分组的子集,实现效果如下;
实现
<div class="flex" style="flex:1">
<div class="flex flexv col" v-for="type in 4" :key="type">
<div
class="line"
v-for="(item, index) in treeData[type - 1]"
:key="index"
:class="{ 'bg-blue': activeArr[type - 1] == index }"
:ref="'line-' + type"
:style="{ '--heightLine': heightLine + 'px' }"
>
<div class="box" @click="changeTreeData(type - 1, index)">
{{ item.name }}
</div>
</div>
</div>
</div>
.col {
flex: 3;
.box {
background: #f7f7f7;
border: 1px solid #d3d4d5;
border-radius: 4px;
// width: 150px;
padding: 5px 10px;
margin: 5px 50px 5px 20px;
position: relative;
&::before {
content: " ";
display: inline-block;
width: 8px;
height: 8px;
border: 1px solid #d3d4d5;
border-radius: 50%;
position: absolute;
top: 11px;
left: -18px;
}
}
.bg-blue {
.box {
background: #51b6ed;
border-color: #51b6ed;
color: #fff;
&::before {
background: #51b6ed;
border-color: #51b6ed;
}
&::after {
content: " ";
display: inline-block;
width: 30px;
height: 1px;
border-bottom: 2px solid #d7d7d775;
position: absolute;
top: 14px;
right: -30px;
}
}
}
.line {
position: relative;
&::before {
content: " ";
display: inline-block;
width: 25px;
height: 42px;
border-bottom: 2px solid #d7d7d775;
border-left: 2px solid #d7d7d775;
position: absolute;
top: -20px;
left: -22px;
}
&:first-child {
&::before {
height: 1px;
top: 20px;
}
}
}
&:first-child {
flex: 2;
.box {
// width: 80%;
}
.line {
&::before {
width: 0;
height: 0;
}
}
}
.bg-blue.line {
&::after {
content: " ";
display: inline-block;
width: 25px;
// height: 42px;
height: var(--heightLine);
border-left: 2px solid #d7d7d775;
position: absolute;
bottom: 22px;
right: -3px;
}
&:first-child {
&::after {
height: 0;
}
}
}
&:nth-last-child(1) {
.bg-blue.line {
.box {
&::after {
height: 0;
width: 0;
}
}
}
}
}
data(){
return {
activeArr: [0, 0, 0, 0],
treeData: [],
heightLine: 42,
}
},
mounted(){
this.treeData[0] = [
{
name: "客户",
children: [
{
name: "账户信息",
children: [
{
name: "账户信息1",
children: [{ name: "账户信息2", children: null }],
},
],
},
{
name: "法定货币",
children: [
{
name: "法定货币1",
children: [{ name: "法定货币2", children: null }],
},
],
},
],
},
{
name: "业务",
children: [
{
name: "个人",
children: [
{
name: "个人1",
children: [
{ name: "个人2", children: null },
{ name: "个人3", children: null },
],
},
{
name: "个人11",
children: [{ name: "个人22", children: null }],
},
],
},
{
name: "单位",
children: [
{ name: "单位1", children: [{ name: "单位2", children: null }] },
],
},
{
name: "团体",
children: [
{ name: "团体1", children: [{ name: "团体2", children: null }] },
{
name: "团体11",
children: [{ name: "团体22", children: null }],
},
],
},
],
},
];
this.treeData[1] = this.treeData[0][0].children[0];
this.$set(this.treeData, 1, this.treeData[0][0].children);
this.$set(this.treeData, 2, this.treeData[1][0].children);
this.$set(this.treeData, 3, this.treeData[2][0].children);
},
methods:{
changeTreeData(type, index) {
//改变data中的数组要用set方法,页面上才会实时改变
this.$set(this.activeArr, type, index);
type < 3
? this.$set(
this.treeData,
type + 1,
this.treeData[type][index].children
)
: "";
type < 2 ? this.$set(this.activeArr, type + 1, 0) : "";
type < 2
? this.$set(
this.treeData,
type + 2,
this.treeData[type + 1][0].children
)
: "";
type < 1 ? this.$set(this.activeArr, type + 2, 0) : "";
type < 1
? this.$set(
this.treeData,
type + 3,
this.treeData[type + 2][0].children
)
: "";
//如果当前点击这一级比下一级个数少,显示向上去的线
let ref = "line-" + (type + 1);
let i = index + 1 - this.treeData[type + 1].length;
i > 0
? (this.$refs[ref][index].style.cssText =
"--heightLine:" + 42 * i + "px;")
: "";
},
}