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);
}
});
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的vue 实现的树形菜的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
