vue实现树形结构增删改查

最新推荐文章于 2024-10-01 00:27:26 发布

前端开发二月半

最新推荐文章于 2024-10-01 00:27:26 发布

阅读量1w

点赞数 8

分类专栏： Vue 文章标签： vue 树形组件增删改查

本文链接：https://blog.youkuaiyun.com/ying940718/article/details/98502404

版权

本文分享了如何使用Vue实现树形结构的增删改查功能，包括编辑状态下的节点操作，最外层节点的添加，并提供了关键代码示例。文章最后提到了编辑状态下的增删改细节，但未详述，仅给出主要逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实很多公司都会有类似于用户权限树的增删改查功能，正好最近我刚写了一个树形结构的增删改，在这里和大家分享一下，如果有不合理的地方欢迎评论，我会尽快优化~~

先附上一下效果图

这个是没有点击编辑时，产品的需求是选中某个节点，取得该节点对应的设备数据，所以初始页面是下面这个样子的。
在这里插入图片描述
这个是点击了编辑之后，显示节点的编辑按钮

点击最上面的添加按钮，显示最外层父节点的添加画面

修改节点名称

因为我们的需求是编辑与非编辑两种状态，所以我用了两个树形组件，通过v-if进行控制。（v-if：该组件不存在，v-show：组件占用空间，只是不展示）

<el-tree
    v-if="treeSetData.editFlg"
     ref="tree"
     :key="treeSetData.tree_key"
     :data="treeSetData.treeData"
     node-key="id"
     :render-content="renderContent"
     :expand-on-click-node="false"
     :default-expand-all="treeSetData.defaultExpandAll"
     highlight-current
     @node-click="handleNodeClick"
     class="tree-style"
 ></el-tree>
 <el-tree
     v-else
     ref="tree"
     :key="treeSetData.tree_key"
     :data="treeSetData.treeData"
     node-key="id"
     :render-content="renderContent"
     :expand-on-click-node="false"
     :default-expand-all="treeSetData.defaultExpandAll"
     highlight-current
     class="tree-style"
 ></el-tree>

树形组件的字段说明我就不一一赘述了，可以通过element-ui的树形组件官网查看，但是我要单独说明一下以下方法，

render-content：自定义节点内容，renderContent：为方法名。
@node-click：节点点击时调用，因为只有在非编辑状态下才存在节点点击效果，因此该方法我只写在了非编辑的树形组件内

所需data说明

// 树形结构所需数据  
treeSetData:{
  defaultExpandAll:true, // 是否默认展开
  editFlg:true,

最低0.47元/天解锁文章