手动编写树形图点击分组显示对应子集，vue中动态修改style(修改伪元素样式)，样式中使用data里面的数据

需求

实现树状图，同级值展示一行分组的子集，实现效果如下；

实现

<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;")
        : "";
    },
}