elment树状表格增删改查

### Element UI 树状表格的增删改查操作

#### 添加新节点
为了向树状表格中添加新的子节点，可以定义一个方法来处理此逻辑。该方法接收父节点的信息以及要添加的新节点的数据。

addNode(parentId, newNode) {
    this.data.forEach((item, index) => {
        if (item.id === parentId) {
            if (!item.children) {
                Vue.set(item, 'children', []);
            }
            item.children.push(newNode);
        } else if (item.children && item.children.length > 0) {
            const result = this.addNodeInChildren(item.children, parentId, newNode);
            if (result) {
                return;
            }
        }
    });
}

上述代码遍历`data`数组寻找匹配的父级ID并插入新节点到其下[^1]。

#### 删除现有节点
删除指定ID对应的节点可以通过递归函数完成：

removeNode(nodeId) {
    function remove(data) {
        let removed = false;
        data.some((item, index) => {
            if (item.id === nodeId) {
                data.splice(index, 1);
                removed = true;
                return true;
            }
            if (item.children && !removed) {
                remove(item.children);
            }
        });
    }

    remove(this.data);
}

这段脚本会从顶层开始逐层检查直到找到目标节点并将其移除[^2]。

#### 更新已有节点信息
更新特定节点的内容同样依赖于遍历整个数据集定位待修改项的位置：

updateNode(idToUpdate, updates) {
    function update(data) {
        data.some(item => {
            if (item.id === idToUpdate) {
                Object.assign(item, updates);
                return true;
            }
            if (item.children) {
                return update(item.children);
            }
        });
    }

    update(this.data);
}

这里通过`Object.assign()`方法将传入的对象属性复制给现有的节点对象[^3]。

#### 查询节点
查询功能可以根据不同的条件筛选出符合条件的一组或多组记录。例如按名称模糊搜索所有包含关键词的结果：

searchNodes(keyword) {
    const results = [];
    
    function search(data) {
        data.forEach(item => {
            if (item.label.includes(keyword)) {
                results.push({...item});
            }
            if (item.children) {
                search(item.children);
            }
        });
    }

    search(this.data);

    return results;
}

以上实现了基于标签名进行简单字符串匹配的功能[^4]。