elementUI树结构Tree修改/编辑原节点变为input输入框

最新推荐文章于 2024-05-21 14:19:13 发布

1024_Byte

最新推荐文章于 2024-05-21 14:19:13 发布

阅读量6.7k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue javascript es6 css vue.js

本文链接：https://blog.csdn.net/DDD4V/article/details/117225797

思路分析

点击修改，节点由span变input，input中显示的内容为原节点内容，并获得焦点全选
修改后，失去焦点，由input变回span,节点内容修改

<h4>那这样我们需要一个数据内容来控制input和span切换的值</h4>

数据内容

在接口返回的数据中，添加showInput字段，来控制什么时间切换节点标签

Html结构

    <el-tree
              class="tree"
              :data="treeData"
              @node-click="handleNodeClick"
              @node-contextmenu="nodeRigthClick"
              ref="tree"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-if="!data.showInput">{
  
  { node.label }}</span>
                <el-input
                  size="mini"
                  ref="inputVal"
                  v-if="data.showInput"
                  :value="data.label"
                  @focus="focus($event)"