vue横向树结构_vue组件横向树实现代码

将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中，文件名为transverseTree.vue

代码：

• { {column.name}}

  • { {childrenColumn.name}}

    • { {grandChildrenColumn.name}}

export default {

name: 'transverseTree',

props: {

treeData:{

type:Array,

default:[]

}

},

methods: {

editDom(){

if($('.root').siblings('ul').children('li').length==1){

let num = 26*($('.root').siblings('ul').children('li').find('li').length-1);

$('.root').css({ 'top': num });

$('.root').siblings('ul').children('li').css({ 'top': num });