eltree增删改功能记录

最新推荐文章于 2024-08-22 16:38:00 发布

某某ki

最新推荐文章于 2024-08-22 16:38:00 发布

阅读量912

点赞数

分类专栏： element 文章标签： javascript html vue 前端 css

本文链接：https://blog.csdn.net/qq_39114755/article/details/105595861

版权

本文记录了使用el-tree组件在JavaScript、HTML和Vue中实现添加同级节点、添加子级节点、重命名节点和删除节点的功能。涉及到前端开发中的DOM操作和数据绑定。

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

需实现功能：

添加同级节点
添加子级节点
重命名节点
删除节点

功能截图
HTML

  <el-tree ref="tree" :data="data" node-key="id" default-expand-all draggable>
        <div class="tree-node" slot-scope="{
    node, data }">
          <div class="tree-node">
            <span v-if="data.label&&!node.checked" class="node-tit">{
   {
    data.label }}</span>
            <div v-else>
              <el-input v-model="data.label"></el-input>
              <el-button @click="saveLable(node, data)" class="save-btn">保存</el-button>
            </div>
            <span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown