用vue写一个树形菜单

先看下效果:
用vue写一个树形菜单_第1张图片

在线效果
源代码
用到的技术
1,vue组件,组件事件传递
2,递归

代码
组件:


Vue.component('item-li', {
    template: '#item-template',
    props: ['itemData'],
    data: function() {
        return {
            pleft: "padding-left:0px;",
        }
    },
    methods: {
        countPleft() {
            var num = $(this.$el).parents(".item").length;
            this.pleft = "padding-left:"+ num*10 +"px;";
        },
        changeToggleOpen() {
            this.itemData.toggleOpen = !this.itemData.toggleOpen;
        },
        changeActive(d) {
            this.$emit('change-active', d);
        }
    },
    mounted() {
        this.$nextTick(function() {
            this.countPleft();
        });
    },
})

调用方法:

vue的methods的必须方法:

data: {
    dlist: [],
    departmentId: "",
},
methods: {
	// 这个方法传入对象,比如开始默认选中第一个,d 为 dlist[0],具体的这部分代码可以查看在线效果地址的源码。
	changeActive(d) {
	    if (d.active) return;
	    this.departmentId = d.id;
	    this.resetActive(this.dlist);
	    d.active = true;
	},
	resetActive(tlist) {
	    var _self = this;
	    tlist.forEach(function(v,i) {
	        v.active = false;
	        if (v.child) {
	            _self.resetActive(v.child);
	        }
	    });
	},
}

dlist数据结构为:
用vue写一个树形菜单_第2张图片

你可能感兴趣的:(javascript)