vue|vue 组件化开发（三）elementui el-tree 实现可编辑树 vue|全家桶

【vue|vue 组件化开发（三）elementui el-tree 实现可编辑树】如图：

文章图片

html ：

数据定义：

data() { return { runParam: {}, treeData: null, isAdd: false, dialogVisible: false, renderNode: null, renderData: null, savePostUrl: "", delPostUrl: "", getAll: "", sortOrder: "", checkName: "", defaultProps: { children: "CHILDREN", label: "NAME" } }; },

methods 部分：

confirm: function() { this.delTreeNode(this.renderNode, this.renderData); }, addNode() { if (this.dialogName == "gwjb" && !this.selectSquence) return; this.runParam.oldData = https://www.it610.com/article/JSON.parse(JSON.stringify(this.treeData)); this.runParam.parentNode = null; this.runParam.level = 0; this.treeData.push({ NAME:"", CHILDREN: [], STATUS: 1, ID: null }); }, append(node, data) { if (node.level >= this.maxLevel) return; this.runParam.oldData = https://www.it610.com/article/JSON.parse(JSON.stringify(this.treeData)); if (!data.CHILDREN) this.$set(data,"CHILDREN", []); this.runParam.parentNode = JSON.parse(JSON.stringify(data)); this.isAdd = true; const newChild = { ID: null, NAME: "", CHILDREN: [], STATUS: 1 }; data.CHILDREN.push(newChild); }, remove(node, data) { this.dialogVisible = true; this.renderNode = node; this.renderData = https://www.it610.com/article/data; }, blurEdit(data, node) { if (data.NAME =="") this.treeData = https://www.it610.com/article/JSON.parse(JSON.stringify(this.runParam.oldData)); else this.checkRepeatName(data, node); }, dbEdit(node, data) { this.runParam.oldData = JSON.parse(JSON.stringify(this.treeData)); this.runParam.parentNode = data.PID ? data.PID : null; this.$set(data,"STATUS", 1); this.isAdd = false; this.$forceUpdate(); }, collapse(moveNode, inNode, type) { if (moveNode.level == 1 && inNode.level == 1) return type == "prev"; if (moveNode.level == 2 && inNode.level == 2 && moveNode.parent.ID == inNode.parent.ID) return type == "prev"; }, nodeDropEnd() { let _this = this; let par = { serviceName: "pos", servicePath: this.sortOrder, LIST: _this.treeData }; this.$nextTick(function() { _this .$request(par) .then(() => { _this.$store.dispatch(_this.dishpatch, JSON.parse(JSON.stringify(_this.treeData))); }) .catch(msg => _this.$message.error(msg)); }); },