# 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 这是个循环模板 通过递归完成循环 ``` ``` ### 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) { //按钮【按钮二】的回调 }); } ```