# tree

**Repository Path**: treey_yao/tree

## Basic Information

- **Project Name**: tree
- **Description**: vue 树形插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-05-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: vue-extensions

**Tags**: None

## README

tree 是个一个基于vue的插件。 支持

    1. 异步加载数据
    2. 增加树形节点
    3. 编辑树形节点
    4. 删除树形节点

（这里用了layui里面的样式和弹窗）

 ### Json 格式类似这样( 完全可以根据自己的需要改 )

```
var treeData = [{
    "id": 1,
    "name": "必体验",
    "child": []
}, {
    "id": 2,
    "name": "休闲生活",
    "child": [{
        "id": 15,
        "level": 2,
        "name": "热门城市",
        "child": [{
            "id": 5,
            "name": "乌鲁木齐",
            "child": []
        }, {
            "id": 6,
            "name": "北京",
            "child": []
        }, {
            "id": 7,
            "name": "南京",
            "child": []
        }, {
            "id": 8,
            "name": "昌吉",
            "child": []
        }, {
            "id": 9,
            "name": "西安",
            "child": []
        }]
    }, {
        "id": 16,
        "name": "主题",
        "child": [{
            "id": 10,
            "name": "城市经典",
            "child": []
        }, {
            "id": 11,
            "name": "四季美食",
            "child": []
        }, {
            "id": 12,
            "name": "周末减压",
            "child": []
        }, {
            "id": 13,
            "name": "亲子成长",
            "child": []
        }, {
            "id": 14,
            "name": "聚会团建",
            "child": []
        }]
    }]
}, {
    "id": 3,
    "name": "慢旅",
    "child": []
}, {
    "id": 4,
    "name": "酒店民宿",
    "child": []
}];

```

 ### html 这是个循环模板  通过递归完成循环

 ```
 <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>
                <!-- <input  type="checkbox" name="" :title="v.name" lay-skin="primary" @click="changeCheck(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>
```

 ### vue 增加功能 i 是数据坐标

  ```
  //添加节点
addNode(i) {
    var that = this;
    var addLayer = that.layer.open({
        type: 1,
        content: $("#addNodelayer"),
        area: ['480px', '430px'],
        title: "添加标签",
        success: function() {
            //执行实例
            var uploadInst = that.upload.render({
                elem: '#addImgbtn', //绑定元素
                url: ajaUrl + '', //上传接口
                done: function(res) {
                    //上传完毕回调
                },
                error: function() {
                    //请求异常回调
                }
            });

            that.form.on("submit(addDataBtn)", function(data) {
                layer.msg(JSON.stringify(data.field));
                var postdata = JSON.parse(JSON.stringify(data.field));

                var Pdata = {
                    child: [],
                    imgUrl: postdata.file,
                    level: that.tree[i].level + 1,
                    name: postdata.name,
                    pid: that.tree[i].id,
                    type: 1,
                    remark: postdata.remark,
                }

                that.$.ajax({
                    type: "post",
                    url: ajaUrl + "admin/goods/addGoodsTypeLY.do",
                    data: Pdata,
                    async: false,
                    dataType: "json",
                    success: function(res) {
                        if (res.code == 0) {
                            that.tree[i].child.push(Pdata);
                            that.tree[i].open = true;
                            that.layer.close(addLayer);
                            layer.msg('添加成功！');
                        } else {
                            layer.msg('添加失败！');
                        }
                    }
                });
                return false;
            })
        }
    });
},
```      

 ### vue 编辑功能 i 是数据坐标

  ```
//编辑节点
editNode(i) {
    var that = this;
    var addLayer = that.layer.open({
        type: 1,
        content: $("#editNodelayer"),
        area: ['480px', '430px'],
        title: "修改标签",
        success: function() {
            vm.$data.name = that.tree[i].name;
            vm.$data.url = that.tree[i].imgUrl;

            //执行实例
            var uploadInst = that.upload.render({
                elem: '#addImgbtn', //绑定元素
                url: '/upload/', //上传接口
                done: function(res) {
                    //上传完毕回调
                },
                error: function() {
                    //请求异常回调
                }
            });

            that.form.on("submit(editDataBtn)", function(data) {
                layer.msg(JSON.stringify(data.field));
                var postdata = JSON.parse(JSON.stringify(data.field));

                var Pdata = {
                    id: that.tree[i].id,
                    imgUrl: postdata.file,
                    name: postdata.name,
                    remark: postdata.remark,
                }

                that.$.ajax({
                    type: "post",
                    url: ajaUrl + "admin/goods/updateGoodsTypeLY.do",
                    data: Pdata,
                    async: false,
                    dataType: "json",
                    success: function(res) {
                        if (res.code == 0) {
                            that.tree[i].imgUrl = postdata.file;
                            that.tree[i].name = postdata.className;
                            that.tree[i].remark = postdata.remark;
                            that.layer.close(addLayer);
                            layer.msg('修改成功！');
                        } else {
                            layer.msg('修改失败！');
                        }
                    }
                });
                return false;
            })

        }
    });
},
```


### vue 删除功能 i 是数据坐标

```
//删除节点
delNode(i) {
    var that = this;
    that.layer.confirm('确定删除该分类？', {
        btn: ["确定", '取消'],
    }, function(index, layero) {
        that.$.ajax({
            type: "post",
            url: ajaUrl + "admin/goods/GoodsTypeIsDEL.do",
            data: {
                id: that.tree[i].id
            },
            async: false,
            dataType: "json",
            success: function(res) {
                if (res.code == 0) {
                    that.tree.splice(i, 1);
                    layer.close(index);
                    layer.msg('删除成功！');
                } else {
                    layer.msg('删除失败！');
                }
            }
        });
    }, function(index) {
        //按钮【按钮二】的回调
    });
}
```