el-tree双击节点变输入框重命名

el-tree双击节点变输入框重命名

描述

双击el-tree的节点，该节点变成输入框，实现重命名

效果

分析与数据结构

就是让后端加一个叫showInput字段，值都是false，通过这个字段来控制显示span呢还是input呢

代码

<el-tree
  ref="myIndexTree"
  check-strictly
  check-on-click-node
  :data="treeDataIndex"
  :props="defaultPropsT"
  @check="treeCholice"
  node-key="id"
  show-checkbox
  :filter-node-method="filterNode"
>
  <span class="custom-tree-node" slot-scope="{ node, data }" @dblclick="(e)=>{ 
    data.showInput = true }">
     <span v-if="!data.showInput">{{ node.label }}</span>
      <el-input
        style="width: 98%;"
        size="mini"
        ref="inputVal"
        v-if="data.showInput"
        v-model.trim="data.label"
        @focus="focus($event,node)"
        @input="a => inp(a, data)"
        @blur="alters(node, data,$event)"
        v-focu
      >
    </el-input>
  </span>
</el-tree>

directives: {  // 自动获取焦点
 focu: {
    inserted: function (el) {
      el.querySelector('input').focus()
    }
  }
},
  
methods: {
  focus(event, node){  // 获取焦点
    event.target.value = node.label
    event.currentTarget.select();
  },
  inp(value, data){  // 修改
    // 这里得加判断，因为.trim不管用，如果输入空，就显示之前的值
    if(value == ' '){
      data.name = data.extra.nodeName
    } else {
      data.name = value;
    }
    console.log(value);  // value就是新的节点名称，后端需要就传过去
  },
  alters(node, data, event){
    data.showInput = !data.showInput
  },
}

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