vue3+ts+elementplus实现多级的增删改查

### 实现基于 Vue 3、TypeScript 和 Element Plus 的多级数据增删改查功能 在 Vue 3 中结合 TypeScript 和 Element Plus 实现多级数据（树形结构）的增删改查功能，通常涉及以下几个关键点： 1. **数据结构设计** 多级数据通常采用嵌套结构，例如： ```typescript interface TreeNode { id: number; label: string; children?: TreeNode[]; } ``` 每个节点包含 `id`、`label` 和 `children` 字段，其中 `children` 用于存储子节点。 2. **使用 El-Tree 或 El-Table 组件** Element Plus 提供了 `El-Tree` 和 `El-Table` 两种组件用于展示树形结构。`El-Tree` 更适合展示层级清晰的树状结构，而 `El-Table` 则适合展示表格形式的树形数据，尤其是在需要懒加载时。 3. **懒加载实现** 对于大型数据集，使用懒加载可以提升性能。以 `El-Table` 为例，可以通过 `lazy` 属性和 `load` 方法实现： ```vue <el-table :data="tableData" row-key="id" lazy :load="loadNode" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" > <el-table-column prop="label" label="名称"></el-table-column> </el-table> ``` 其中 `loadNode` 方法用于异步加载子节点： ```typescript const loadNode = (row: TreeNode, treeNode: any, resolve: (data: TreeNode[]) => void) => { // 异步请求子节点数据 getChildrenNodes(row.id).then((res) => { resolve(res.data); }); }; ``` 4. **增删改查操作** - **添加节点** 添加节点时需判断是添加顶级节点还是子节点。例如，在 `El-Table` 中，可以通过 `ref` 获取表格实例并操作 `store`： ```typescript const addNode = (elTableRef: TableInstance, parentId?: number | null, newNode?: TreeNode) => { const tableStore = elTableRef.store; if (!parentId) { // 添加顶级节点 tableStore.states.data.value.push(newNode); } else { // 添加子节点 const childrenNodes = tableStore.states.lazyTreeNodeMap?.value[parentId]; if (childrenNodes) { childrenNodes.push(newNode); } } }; ``` - **删除节点** 删除节点同样需要区分是删除顶级节点还是子节点。参考引用 [^2] 中的方法： ```typescript const deleteNode = (elTableRef: TableInstance, node: { id: number; parentId?: number | null }) => { const tableStore = elTableInstance.store; if (!node.parentId) { // 删除顶级节点 const parentNodes = tableStore.states.data.value; const index = parentNodes.findIndex((item) => item.id === node.id); if (index !== -1) { parentNodes.splice(index, 1); } } else { // 删除子节点 const childrenNodes = tableStore.states.lazyTreeNodeMap?.value[node.parentId]; const index = childrenNodes.findIndex((item) => item.id === node.id); if (index !== -1) { childrenNodes.splice(index, 1); } } }; ``` - **修改节点** 修改节点只需找到对应节点并更新其属性： ```typescript const updateNode = (elTableRef: TableInstance, node: TreeNode) => { const tableStore = elTableRef.store; const allNodes = tableStore.states.data.value; const findNodeAndUpdate = (nodes: TreeNode[]) => { for (let i = 0; i < nodes.length; i++) { if (nodes[i].id === node.id) { nodes[i] = { ...nodes[i], ...node }; break; } if (nodes[i].children) { findNodeAndUpdate(nodes[i].children!); } } }; findNodeAndUpdate(allNodes); }; ``` 5. **异步刷新节点** 在进行增删改操作后，可能需要重新加载节点数据以保持一致性。可以通过重新调用 `loadNode` 或者重新初始化 `tableData` 来实现。 6. **状态管理（可选）** 如果项目中使用了 Vuex 4（Vue 3 的 Vuex 版本），可以将树形数据存储在 Vuex 中，以便在多个组件之间共享和更新。参考引用 [^3] 提到的 Vuex 4 安装方式。 ###