【elementUI tree】：https://element.eleme.cn/#/zh-CN/component/tree

 

<el-tree
  :data="data"
  ref="tree"
  node-key="id"
  :highlight-current="true"
  :current-node-key="0"
  @node-click="getCurrentKey"
  :default-expand-all="true"
></el-tree>

data() {
  return {
    nodekey: "",//node-key
    data: [],//返回数据
    defaultProps: {
      children: "children",
      label: "label"//返回数据中的label，也可以更换其他
    }
  };
},

"data":[{"id":0,"label":"机构简介","categoryId":"0"},{"id":1,"label":"组织运行","categoryId":"1"},{"id":2,"label":"品牌项目—爱飞翔","categoryId":"2"},{"id":3,"label":"品牌项目—爱传递","categoryId":"3"},{"id":4,"label":"所获荣誉","categoryId":"4"},{"id":5,"label":"媒体报道","categoryId":"5"},{"id":6,"label":"视频展示","categoryId":"6"},{"id":7,"label":"信息公开","categoryId":"7","children":[{"id":7001,"label":"登记证书","categoryId":"7001"},{"id":7002,"label":"机构章程","categoryId":"7002"},{"id":7003,"label":"年检报告&财务报告","categoryId":"7003"},{"id":7004,"label":"接受及使用捐赠资助","categoryId":"7004"},{"id":7005,"label":"服务及承诺","categoryId":"7005"}]}

this.$nextTick(() => {
  this.$refs.tree.setCurrentKey(this.nodekey);//数据请求成功后，设置默认current
});

 样式自定义

.el-tree /deep/ .el-tree-node .el-tree-node__content{
  width: 200px;
  height: 43px;
  background: rgba(196,238,160,1);
  margin: 1px 0;
  color: #007D39;
}
.el-tree /deep/ .is-current>.el-tree-node__content{
  background: rgba(110,184,45,1) !important;
  color: #fff !important;
}
.el-tree /deep/ .el-tree-node__label {
  display: inline-block;
  width: 72%;
}
.el-tree /deep/ .is-current>.el-tree-node__content:after{
  content: "\2022";
  color: #fff;
  font-size: 40px;
  position: relative;
  right: 0;
  bottom: 0;
  cursor: pointer;
}
.el-tree /deep/ .el-tree-node__children .el-tree-node__content{
  width:200px;
  height:34px;
  background:rgba(228,247,211,1) !important;
}
.el-tree /deep/ .el-tree-node__children .is-current .el-tree-node__content {
  background: rgba(110,184,45,1) !important;
  color: #fff !important;
}
.el-tree /deep/ .el-tree-node__children .el-tree-node__content{
  color: #007D39 !important;
}
.el-tree /deep/ .el-tree-node__children .is-current .el-tree-node__content:after{
  content: "\2022";
  font-size: 40px;
  position: relative;
  right: 10px;
  bottom: 0;
  cursor: pointer;
  color: #fff !important;
}
.el-tree .el-tree-node__expand-icon{
  color: #fff !important;
}
.el-tree-node__expand-icon.is-leaf{
  color: transparent !important;
}