使用vue2+elementui中tree组件实现目录

最新推荐文章于 2024-06-12 20:52:17 发布

navalercon

最新推荐文章于 2024-06-12 20:52:17 发布

阅读量835

点赞数

分类专栏： vue2 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/navalercon/article/details/128837852

版权

本文介绍了在Vue2项目中使用ElementUI的Tree组件实现目录功能，包括增删改查操作。在实现拖拽功能时，文章特别讨论了拖拽失败后的状态复原问题，指出直接复制数据并使用nextTick刷新页面的方法会导致用户体验不佳，同时提醒在`node-drag-start`事件中无法从node节点获取父节点信息，因为空的node节点可能导致错误。

摘要由CSDN通过智能技术生成

目录的重要功能有增删改查和拖拽

html部分：

<main class="tree_main">
      <el-tree
        ref="tree"
        :data="treeData"
        node-key="id"
        draggable
        :filter-node-method="filterNode"
        :allow-drop="allowDrop"
        @node-click="clickLeftNode"
        @node-contextmenu="clickRightNode"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
      >
        <div slot-scope="{node}" class="tree_node">
          <el-popover placement="right" trigger="manual" :value="activeId===node.id" width="100">
            <section class="tree_addition">
              <div class="tree_addition_item">
                <el-button block ty