vue實現(xiàn)樹形菜單效果

第vue實現(xiàn)樹形菜單效果liv-for='(v,i)intree'

spanv-if="isFolder(v)"@click="toggle(i)"{{tree[i].open'-':'+'}}/span

adata-id="v.id"{{v.city}}/a

itemv-bind:tree='v.child'v-show="tree[i].open"/item

/li

/ul

/template

script

vardata=[{"id":26,"pid":1,"city":"四川省"},{"id":30,"pid":1,"city":"云南省"},{"id":322,"pid":26,"city":"成都"},{"id":323,"pid":26,"city":"綿陽"},{"id":324,"pid":26,"city":"阿壩"},{"id":325,"pid":26,"city":"巴中"},{"id":326,"pid":26,"city":"達州"},{"id":327,"pid":26,"city":"德陽"},{"id":328,"pid":26,"city":"甘孜"},{"id":329,"pid":26,"city":"廣安"},{"id":330,"pid":26,"city":"廣元"},{"id":331,"pid":26,"city":"樂山"},{"id":332,"pid":26,"city":"涼山"},{"id":333,"pid":26,"city":"眉山"},{"id":334,"pid":26,"city":"南充"},{"id":335,"pid":26,"city":"內江"},{"id":336,"pid":26,"city":"攀枝花"},{"id":337,"pid":26,"city":"遂寧"},{"id":338,"pid":26,"city":"雅安"},{"id":339,"pid":26,"city":"宜賓"},{"id":340,"pid":26,"city":"資陽"},{"id":341,"pid":26,"city":"自貢"},{"id":342,"pid":26,"city":"瀘州"},{"id":367,"pid":30,"city":"昆明"},{"id":378,"pid":30,"city":"曲靖"},{"id":3100,"pid":367,"city":"盤龍區(qū)"},{"id":3101,"pid":367,"city":"五華區(qū)"},{"id":3102,"pid":367,"city":"官渡區(qū)"},{"id":3103,"pid":367,"city":"西山區(qū)"},{"id":3104,"pid":367,"city":"東川區(qū)"},{"id":3105,"pid":367,"city":"安寧市"},{"id":3106,"pid":367,"city":"呈貢縣"},{"id":3107,"pid":367,"city":"晉寧縣"},{"id":3108,"pid":367,"city":"富民縣"},{"id":3109,"pid":367,"city":"宜良縣"},{"id":3110,"pid":367,"city":"嵩明縣"},{"id":3111,"pid":367,"city":"石林縣"},{"id":3112,"pid":367,"city":"祿勸"},{"id":3113,"pid":367,"city":"尋甸"},{"id":3189,"pid":378,"city":"麒麟?yún)^(qū)"},{"id":3190,"pid":378,"city":"宣威市"},{"id":3191,"pid":378,"city":"馬龍縣"},{"id":3192,"pid":378,"city":"陸良縣"},{"id":3193,"pid":378,"city":"師宗縣"},{"id":3194,"pid":378,"city":"羅平縣"},{"id":3195,"pid":378,"city":"富源縣"},{"id":3196,"pid":378,"city":"會澤縣"},{"id":3197,"pid":378,"city":"沾益縣"}];

vartreeData=createTree({

idname:'id',

pidname:'pid',

rootid:1,

data:data

functioncreateTree(arg){

varidname=arg.idname,

pidname=arg.pidname,

rootid=arg.rootid,

data=arg.data,

treeData=[];

var_createTree=function(id){

varret=[];

varindex=0;

for(vari=0;idata.length;i++){

if(data[i][pidname]==id){

ret[index]=data[i];

ret[index].child=_createTree(data[i][idname]);

index++;

returnret;

varindex=0;

for(vari=0;idata.length;i++){

if(data[i][pidname]==rootid){

treeData[index]=data[i];

treeData[index].child=_createTree(data[i][idname]);

index++;

returntreeData;

Vponent('item',{

template:'#tree-template',

props:['tree'],

data:function(){

return{}

methods:{

toggle:function(i){

this.tree[i].open=!this.tree[i].open;

this.$set(this.tree,i,this.tree[i]);

isFolder:function(data){

returndata.childdata.child.length

varvm=newVue({

el:'#app',

data:{

treeData:treeData,

show:false,

methods:{

hideTree:function(e){

if(e.target.id=='app'){

console.log(137);

this.show=false;

created:function(){

function_addOpen(data){

for(vari=0;idata.length;i++){

data[i]['open']=f