element-ui tree结构实现增删改自定义功能代码

在本文中，我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的场景中，我们需要在Tree组件的基础上增加编辑、删除和新增节点的功能。 我们来看一下HTML模板部分： ```html <template> <el-tree id="userMtree" ref="tree" :data="treeData" node-key="id" :render-content="renderContent" :expand-on-click-node="false" @node-click="nodeClick" :default-expanded-keys='expandedKey' ></el-tree> </template> ``` 在这个模板中，`el-tree`组件用于显示树结构，`data`属性接收树的数据，`node-key`定义了唯一标识每个节点的字段，`render-content`用于自定义节点的内容，`expand-on-click-node`设置为`false`表示点击节点时不自动展开，`@node-click`监听节点点击事件，`default-expanded-keys`用来设置默认展开的节点。 接下来是JavaScript部分： ```javascript export default { props: ['treeDataObj', 'isUserMgt'], // 父级传值 和 判断哪个tree data data() { return { treeData: [], // tree数据 expandedKey: [], // 展开节点 checkedID: '' // 选中节点 }; }, mounted() { this.treeData = this.treeDataObj.treeData; let userMtree = document.getElementById('userMtree'); this.$nextTick(() => { userMtree.firstElementChild.classList.add("is-current"); // 添加选中类名 }); this.checkedID = this.treeData[0].id; // 默认选中第一个 }, methods: { // 编辑 nodeEdit(ev, store, data) { data.isEdit = true; this.$nextTick(() => { const $input = ev.target.parentNode.parentNode.querySelector("input") || ev.target.parentElement.parentElement.querySelector("input"); !$input ? "" : $input.focus(); // 获取焦点 }); }, // 失焦事件 edit_sure(ev, data) { const $input = ev.target.parentNode.parentNode.querySelector("input") || ev.target.parentElement.parentElement.querySelector("input"); if (!$input) { return false; } else if ($input.value === '') { this.$message({ type: "info", message: "内容不能为空!" }); } else { // 赋值value data.label = $input.value; data.isEdit = false; } }, // react方法 插入代码 renderContent(h, { node, data, store }) { return ( <span class="custom-tree-node"> <span class="tree_node_label">{this.showOrEdit(data)}</span> <div class="tree_node_op"> <i class="el-icon-edit" on-click={ev => this.nodeEdit(ev, store, data)}/> <i class="el-icon-remove-outline" on-click={() => this.nodeDelete(node, data)}/> {this.isUserMgt ? <i class="el-icon-circle-plus-outline" on-click={() => this.append(data)}></i> : '' } </div> </span> ); }, showOrEdit(d), ... } } ``` 在JS部分，我们定义了一些方法来处理树的操作。`nodeEdit`方法用于开启编辑模式，将节点文本变为可编辑的输入框，并获取焦点。`edit_sure`方法在失去焦点时触发，检查输入是否为空，如果不为空则更新节点的`label`值并关闭编辑模式。`renderContent`方法是关键，它覆盖了Element-UI Tree的默认渲染方式，自定义了节点内容，包括文本、编辑图标、删除图标以及（如果条件满足）新增图标。 `nodeDelete`方法用于删除节点，`append`方法用于在指定节点下新增子节点。这些方法的具体实现没有给出，但通常会涉及操作`treeData`数组，根据节点的`id`或索引找到对应位置进行插入或删除操作，并可能涉及到递归处理子节点。 这个示例展示了如何利用Element-UI的Tree组件自定义节点的显示和交互，实现编辑、删除和新增功能。通过监听用户操作，修改数据源（`treeData`），并重新渲染Tree组件，可以达到动态更新树结构的效果。这在构建具有层级关系的管理界面时非常有用。为了完整实现这个功能，你需要补充缺失的方法如`nodeDelete`和`append`，以及可能需要的其他业务逻辑。