web前端开发技术博客
当前位置: 免费资源 > vue多级树形菜单插件

vue多级树形菜单插件

2019-05-30 分类:免费资源 作者:码云 阅读(6453)

vue.js树形菜单插件,自定义添加编辑删除树形结构菜单。

同时,支持异步加载数据,增加节点,删除节点,编辑节点。

vue多级树形菜单插件

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<div id="vm">
        <div class="layui-elem-field">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">树形插件</label>
                    <div class="layui-input-block">
                        <item v-bind:tree='treeData' id='tree'></item>
                    </div>
                </div>
            </form>
        </div>

        <!-- 添加节点 -弹窗-->
        <div class="layui-row" id="addNodelayer" style="display: none;margin-top: 30px">
            <form class="layui-form" action="" method="post" enctype="multipart/form-data" id="formid1">
                <div class="layui-form-item">
                    <label class="layui-form-label">节点名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <span class="layui-btn" lay-submit lay-filter="addDataBtn">确认添加</span>
                    </div>
                </div>
            </form>
        </div>

        <!-- 编辑编辑 -弹窗-->
        <div class="layui-row" id="editNodelayer" style="display: none;margin-top: 30px">
            <form class="layui-form" action="" method="post" enctype="multipart/form-data" id="formid2">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="className" v-model='name' required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <span class="layui-btn" lay-submit lay-filter="editDataBtn">确认修改</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <template id='treeTemplate'>
        <ul class="tree-box">
            <li class="tree-item" v-for='(v,i) in tree'>
                <div class="tree-info-box">
                    <i  class="layui-icon" :class="[ tree[i].open ? 'layui-icon-triangle-r' :' layui-icon-triangle-d']" v-if="isFolder(v)" @click="toggle(i)"></i>
                    <i v-else  class="layui-icon layui-icon-file"></i>
                    <span :data-id="i" class="title-name"  @click="changeCheck(i)" >{{v.name}}</span>
                    <div class="tree-btn-group">
                        <span class="add-node-btn node-btn" @click="addNode(i)"> <i class="layui-icon layui-icon-add-1"></i> 添加下一级</span>
                        <span class="edit-node-btn node-btn" @click="editNode(i)"> <i class="layui-icon layui-icon-edit"></i> 编辑</span>
                        <span class="del-node-btn node-btn" @click="delNode(i)"> <i class="layui-icon layui-icon-delete"></i> 删除</span>
                    </div>
                </div>
                <item v-bind:tree='v.child' v-show="tree[i].open" style="margin-left: 20px;"></item>
            </li>
        </ul>
    </template>

右侧下载

「如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
0

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - vue多级树形菜单插件

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流