el-tree增删改功能记录

el-tree增删改功能记录

需实现功能：

添加同级节点
添加子级节点
重命名节点
删除节点

HTML

 
        

          

            {{ data.label }}
            

              
              保存
            
            
              
                
                  
                
                
                  添加同级章节
                  添加子级章节
                  重命名
                  删除
                
              
            
          
        
      

javascript

//添加同级节点
insertAfter(node, data) {
  const nodeList = node.parent.childNodes;
  const curArr = node.parent.data.children || node.parent.data;
  const index = curArr.findIndex(d => d.id === data.id) + 1;
  console.log(node);
  new Promise((resolve, reject) => {
    const newBrother = { id: ++this.id, label: "", children: [] };
    curArr.splice(index, 0, newBrother);
    resolve();
  }).then(res => {
    console.log(nodeList[index]);
    nodeList[index].checked = true;
  });
},
//添加子节点
append(node, data) {
  const nodeList = node.childNodes;
  console.log(nodeList);
  new Promise((resolve, reject) => {
    const newChild = { id: ++this.id, label: "", children: [] };
    if (!data.children) {
      this.$set(data, "children", []);
    }
    data.children.push(newChild);
    resolve();
  }).then(res => {
    nodeList[nodeList.length - 1].checked = true;
  });
},
//获取当前节点修改checked值
nodeClick(node) {
  node.checked = true;
},
//删除节点
remove(node, data) {
  const parent = node.parent;
  const children = parent.data.children || parent.data;
  const index = children.findIndex(d => d.id === data.id);
  children.splice(index, 1);
},
//保存label
saveLable(node) {
  node.checked = false;
},