vue 部门tree样式_vue-tree 组织架构图/树形图自动生成(含添加、删除、修改)
|
{{treeData.name}}
|
|
name:"TreeChartOrder",
props: ["json"],
data() {return{
treeData: {
name:'root',
image_url:"https://static.refined-x.com/avat.jpg",
children: [
{
name:'children1',
image_url:"https://static.refined-x.com/avat1.jpg"},
{
name:'children2',
image_url:"https://static.refined-x.com/avat2.jpg",
mate: {
name:'mate',
image_url:"https://static.refined-x.com/avat3.jpg"},
children: [
{
name:'grandchild',
image_url:"https://static.refined-x.com/avat.jpg"},
{
name:'grandchild2',
image_url:"https://static.refined-x.com/avat1.jpg"},
{
name:'grandchild3',
image_url:"https://static.refined-x.com/avat2.jpg"}
]
},
{
name:'children3',
image_url:"https://static.refined-x.com/avat.jpg"}
]
}
}
},
watch: {
json: {
handler:function(Props){
let extendKey= function(jsonData){
jsonData.extend= (jsonData.extend===void 0 ? true: !!jsonData.extend);if(Array.isArray(jsonData.children)){
jsonData.children.forEach(c=>{
extendKey(c)
})
}returnjsonData;
}if(Props){this.treeData =extendKey(Props);
}
},
immediate:true}
},
methods: {
toggleExtend:function(treeData){
treeData.extend= !treeData.extend;this.$forceUpdate();
}
}
}
td{position: relative; vertical-align: bottom;padding:0 0 40px 0;text-align: center; }
.parentNode::after {content:"";position: absolute;left:49.9%;top:-56px;height:30px;border-left:2px solid #ccc;}
.childLevel::before{content:"";position: absolute;left:50%;bottom:57px;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.childLevel::after{content:"";position: absolute;left:0;right:0;bottom:55px;border-top:2px solid #ccc;}
.childLevel:first-child:before, .childLevel:last-child:before{display: none;}
.childLevel:first-child:after{left:50%;height:15px; border:2px solid;border-color:transparent transparent #ccc #ccc;border-radius: 6px 0 0 0;transform: translate3d(1px,0,0)}
.childLevel:last-child:after{right:50%;height:15px; border:2px solid;border-color:transparent #ccc #ccc transparent;border-radius: 0 6px 0 0;transform: translate3d(-1px,0,0)}
.childLevel:first-child.childLevel:last-child::after{left:auto;border-radius: 0;border-color:transparent #ccc transparent transparent;transform: translate3d(1px,0,0)}
.node{position: relative; display: inline-block;width: 13em;box-sizing: border-box; text-align: center;}
.node .person{position: relative; display: inline-block;z-index: 2;width:6em; overflow: hidden;}
.node .avat{display: block;width:4em;height: 4em;margin:auto;overflow:hidden; background:#fff;border:1px solid #ccc;box-sizing: border-box;}
.node .avat img{width:100%;height: 100%;}
.node .name{height:2em;line-height: 2em;overflow: hidden;width:95%; background:#eee;border:1px solid #ccc;box-sizing: border-box;border-radius: 5px;}