用vue写一个树形菜单

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/nbin2008/article/details/80350367

先看下效果:
树形菜单

在线效果

用到的技术
1,vue组件,组件事件传递
2,递归

代码
组件:

<script type="text/x-template" id="item-template">
    <li class="item">
        <div class="bold" :class="{'item-active':itemData.active}">
            <div class="mode" :style="pleft">
                <span class="f-caret fa"
                      :class="{'fa-caret-right':!itemData.toggleOpen && itemData.child, 'fa-caret-down':itemData.toggleOpen && itemData.child}"
                      @click.self.prevent="changeToggleOpen()"></span>
                <span class="item-name" @click="changeActive(itemData)">
                    <i class="fa fa-folder folder"></i>
                    {{ itemData.department_name }}
                </span>
            </div>
            <div class="ul-parent">
                <span><i class="fa fa-align-justify"></i></span>
                <ul class="anddelete" :did="itemData.id">
                    <li data-tp="1">添加部门</li>
                    <li data-tp="2">重命名</li>
                    <li data-tp="3">删除</li>
                </ul>
            </div>
        </div>
        <ul v-if="itemData.child" v-show="itemData.toggleOpen">
            <item-li v-for="item in itemData.child" :item-data="item" @change-active="changeActive($event)"></item-li>
        </ul>
    </li>
</script>
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();
        });
    },
})

调用方法:

<ul class="tree-list">
    <item-li v-for="item in dlist" :item-data="item" @change-active="changeActive"></item-li>
</ul>

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数据结构为:
dlist数据结构

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页