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-2defaultCTRLISTRate-5-120173192-blog-128109597.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2defaultCTRLISTRate-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;
}
