el-tree 点击复选框删掉选中的节点

### 实现点击复选框删除 `el-tree` 中选中节点 为了实现在 Element UI 的 `el-tree` 组件中通过点击复选框来删除选中的节点，可以按照以下方法操作： #### 1. 修改模板结构 在 Vue 模板部分，确保已经启用了复选框并绑定了相应的事件处理函数。 ```html <template> <div> <el-tree ref="tree" :data="deptOptions" show-checkbox node-key="id" :default-expanded-keys="[2]" :props="{ label: 'label', children: 'children' }" @check-change="handleCheckChange"> </el-tree> </div> </template> ``` 此配置允许显示复选框，并监听到复选框状态变化时触发的方法[^1]。 #### 2. 添加 JavaScript 方法 接下来，在 `<script>` 部分编写逻辑以响应复选框的状态改变。当某个节点被勾选或取消勾选时，会调用该回调函数来进行进一步的操作——这里是指定要执行的删除动作。 ```javascript <script setup lang="ts"> import { ref, onMounted } from 'vue'; const tree = ref(null); let deptOptions = [ { id: 1, label: "Level one", children: [{ id: 3, label: "Level two", children: [] }] }, { id: 2, label: "Level one" } ]; function handleCheckChange(data, checked, indeterminate) { const nodeIdToDelete = data.id; // 获取当前树实例对象 let instance = tree.value; function removeNode(nodeData, keyToRemove){ if(Array.isArray(nodeData)){ for(let i=0;i<nodeData.length;i++){ if (nodeData[i].id === keyToRemove) { nodeData.splice(i, 1); break; }else{ removeNode(nodeData[i].children || [],keyToRemove ); } } } } // 执行移除操作 removeNode(deptOptions,nodeIdToDelete); } </script> ``` 上述代码片段展示了如何遍历整个数据集找到匹配项并将其从数组中移除的过程。注意这里的 `removeNode()` 函数是一个递归过程，用于深入查找目标节点的位置以便于安全地移除它而不影响其他兄弟元素[^4]。 #### 3. 更新样式（可选） 如果希望调整界面效果，比如隐藏父级的选择框或者只让特定级别的项目可见，则可以根据需求应用 CSS 样式覆盖默认行为[^2][^3]。