【vue-tree-color】代码设置参考

网上的代码基本没问题，但在设置css上，用网上的实例：label-class-name不起效果，调整了一下就可以了。

 

<template>
  <div>
    <vue2-org-tree
      :data="treedata"
      :horizontal="true"
      collapsable
      @on-expand="onExpand"
      @on-node-click="moduleClick"
      :renderContent="renderContent"
    />
  </div>
</template>

<script>
export default {
  name: "InviteApp",
  data() {
    return {
      treedata: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
           
            children: [
              {
                id: 5,
                label: "研发-前端",
              },
              {
                id: 6,
                label: "研发-后端",
              },
              {
                id: 9,
                label: "UI设计",
              },
              {
                id: 10,
                label: "产品经理",
              },
            ],
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部",
              },
              {
                id: 8,
                label: "销售二部",
              },
            ],
          },
          {
            id: 4,
            label: "财务部",
          },
          {
            id: 9,
            label: "HR人事",
          },
        ],
      },
    };
  },

  mounted() {
    this.toggleExpand(this.treedata, true);
  },

  methods: {
    collapse(list) {
      var that = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && that.collapse(child.children);
      });
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },

    toggleExpand(data, val) {
      var that = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          that.$set(item, "expand", val);
          if (item.children) {
            that.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          that.toggleExpand(data.children, val);
        }
      }
    },

    //*************************** */
    //点击图例的每个模块
    //***************************** */
    moduleClick(e, data) {
      console.log(e);
      // e 为 event
      console.log(data);
      // 当前项的所有详情 如：id label children
    },

    //渲染节点
    renderContent(h, data) {
      return (
        <div class="bgcolor">
          <div class="firstlabel">
            <i class="el-icon-user-solid"></i>
            <span>{data.label}</span>
            <span>男</span>
          </div>
          <div class="seclabel">测试人员</div>
        </div>
      );
    },
  },
};
</script>

<style>
/* 设置每个模块的css */
.bgcolor {
  width: 190px;
  height: 50px;
  background: orange;
}

.firstlabel {
  color: red;
  font-size: 12px;
  line-height: 25px;
  font-weight: 900;
}

.seclabel {
  font-size: 12px;
  line-height: 25px;
  color: blue;
}

/* 直接用dom的css设置  */
.org-tree-node-label .org-tree-node-label-inner {
  margin: 0;
  padding: 0;
}
</style>