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;}