vue-tree-color 组件实现组织架构图遇到的坑和解决方案以及实现

**1、前期工作可以先看看大佬的文章 **https://blog.csdn.net/Try_your_best_l/article/details/120173192?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2_defaultCTRLIST_{Rate-5-120173192-blog-128109597.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2}default_CTRLISTRate-5-120173192-blog-128109597.235%5Ev38%5Epc_relevant_default_base&utm_relevant_index=10

2、安装完 vue-tree-color 和 less less-loader 后启动项目，报错，两种情况，一种是less 版本问题（less 使用 3.9.0） 和 autoprefixer 版本问题（使用 7.1.6）

3、进入开发，主要是样式问题了（先看看最终效果）

4、并不是单纯的展示数据而已，还要操作，自定义样式，按钮权限等

// index.vue

6、重点代码是渲染节点的方法，如果加按钮权限，则是下面的代码

import { mapGetters } from 'vuex'
computed: {
  ...mapGetters(['permission']),
  scale() {
    return `scale(${this.scaleRatio})`
  },
  // 按钮权限
  permissionList() {
    return {
      addBtn: this.vaildData(this.permission.businessCulture_add, false),
      viewBtn: this.vaildData(this.permission.businessCulture_view, false),
      delBtn: this.vaildData(this.permission.businessCulture_remove, false),
      editBtn: this.vaildData(this.permission.businessCulture_edit, false)
    }
  }
},
methods:{
	// 渲染节点
    renderContent(h, data) {
      const btnElements = []
      const delElements = []
      // 根据权限显隐
      if (this.permissionList.editBtn) {
        btnElements.push(
          h('i', {
            class: 'el-icon-edit',
            on: {
              click: () => this.handleEdit(data, 2)
            }
          })
        )
      }
      if (this.permissionList.viewBtn) {
        btnElements.push(
          h('span', {
            on: {
              click: () => this.handleEdit(data, 3)
            }
          }, '详情')
        )
      }
      if (this.permissionList.addBtn) {
        btnElements.push(
          h('span', {
            on: {
              click: () => this.handleEdit(data, 1)
            }
          }, '新增下级')
        )
      }
      if (this.permissionList.delBtn) {
        delElements.push(
          h('i', {
            class: 'el-icon-close',
            style: {
              display: data.parentId === '0' ? 'none' : 'inline-block'
            },
            on: {
              click: () => this.handleDel(data)
            }}
          )
        )
      }
      return h('div', { class: 'tree_box' }, [
        h('div', { class: 'tree_title' }, [
          h('span', {}, data.deptName)
        ]),
        h('div', { class: 'tree_content' }, [
          h('div', { class: 'culture_show' }, [
            h('span', '文化路径展示'),
            h('el-image', {
              attrs: {
                src: data.photographs,
                alt: '',
                class: 'img_box'
              },
              props: {
                'preview-src-list': [data.photographs] // 添加preview-src-list属性
              }
            })
          ]),
          h('div', { class: 'des_box' }, [
            h('span', '部（所）简介'),
            h('el-input', {
              attrs: {
                type: 'textarea',
                disabled: true
              },
              props: {
                'value': [data.deptDescribe]
              }
            })
          ])
        ]),
        h('div', { class: 'tree_btn' }, btnElements),
        h('div', { class: 'del_btn' }, delElements)
      ])
    }
}

7、less 代码也贴贴

// tree.less
.culture_box {
  // width: calc(100vw - 240px);
  height: calc(100vh - 122px);
  overflow-x: auto;
  overflow-y: auto;
}
.tree_box {
  width: 100%;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  .tree_title {
    width: 100%;
    font-weight: 600;
    margin-bottom: 10px;
    span {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .tree_content {
    .culture_show {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 10px;
      .el-image {
        width: 170px;
        height: 50px;
        margin-top: 4px;
      }
    }
    .des_box {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 10px;
      .el-textarea {
        font-size: 14px;
        margin-top: 4px;
        background: #f2f2f2;
      }
    }
  }
  .tree_btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .el-icon-edit {
      cursor: pointer;
    }
    span {
      cursor: pointer;
      text-decoration: underline;
    }
  }
  .del_btn {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 16px;
    cursor: pointer;
  }
  .avatar {
    width: 100px;
  }
  .upload_plus {
    font-size: 30px;
  }
}
.org-tree-node-label {
  width: 200px;
}

磕磕碰碰才是人生哈