这次给大家带来vue实现树形菜单步骤说明，vue实现树形菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

vue

*{

color:#585858;

}

#app{

min-height: 650px;

}

#app li{

list-style-type:none;

}

#app a{

text-decoration:none;

}

#app button{

width:100%;

}

#app ul{

padding:10px;

}

#app span{

cursor:pointer;

}

#tree{

border: 1px solid #ccc;

min-height: 650px;

width: 50%;

margin:0;

padding-top: 10px;

background-color:#f2f2f2;

position: absolute;

top:0;

left:0;

}

#tree li {

display: block;

padding: 0;

margin: 0;

border: 0;

border-bottom: 1px solid #e5e5e5;

min-height: 32px;

line-height:32px;

}

点我

• {{ tree[i].open ? '-' : '+' }}

  {{v.city}}

var data = [{"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":"盘龙区"},{"id":3101,"pid":367,"city":"五华区"},{"id":3102,"pid":367,"city":"官渡区"},{"id":3103,"pid":367,"city":"西山区"},{"id":3104,"pid":367,"city":"东川区"},{"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":"麒麟区"},{"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":"沾益县"}];

var treeData = createTree({

idname:'id',

pidname:'pid',

rootid:1,

data:data

});

function createTree(arg){

var idname = arg.idname,

pidname = arg.pidname,

rootid = arg.rootid,

data = arg.data,

treeData = [];

var _createTree = function(id){

var ret = [];

var index = 0;

for(var i = 0; i < data.length; i++){

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

ret[index] = data[i];

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

index++;

}

}

return ret;

}

var index = 0;

for(var i = 0; i < data.length; i++){

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

treeData[index] = data[i];

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

index++;

}

}

return treeData;

}

Vue.component('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) {

return data.child && data.child.length

},

},

})

var vm = new Vue({

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 (var i = 0; i < data.length; i++) {

data[i]['open'] = false;

if (data[i].child.length > 0) {

_addOpen(data[i].child);

}

}

}

_addOpen(this.treeData);

}

});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：