实现el-tree的叶子节点的修改功能

实现el-tree的叶子节点的修改功能

1.要实现的功能如图所示：点击编辑按钮，可修改叶子结点的名称，

2.首先是html部分：

		<el-tree
          :data="departmentData"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span style="color: #333" v-if="!data.showInput">{{node.label}}</span>
            <el-input size="mini" ref="inputVal" v-if="data.showInput" :value="data.label"
              @focus="focus($event)"
              @blur="() => alters(node, data)"
              @input="(a) => inp(a, data)" ></el-input>
           <span>
            <el-button class="el-icon-edit-outline" type="text" size="mini" @click="() => alter(node, data)" >
             </el-button>
            </span>
          </span>
        </el-tree>

3.data数据部分： showInput 字段用来控制 el-input 的显示与隐藏。

data() {
    const departmentData = [
      {
        id: 1,
        label: '北京中心',
        showInput: false,
        children: [
          {
            id: 3,
            label: '驱动组',
            showInput: false,
          },
          {
            id: 4,
            label: '行政组',
            showInput: false,
          },
        ],
      },
      {
        id: 2,
        label: '蚌埠中心',
        showInput: false,
        children: [
          {
            id: 5,
            label: '驱动组',
            showInput: false,
          },
          {
            id: 6,
            label: '行政组',
            showInput: false,
          },
          {
            id: 7,
            label: '硬件组',
            showInput: false,
          },
          {
            id: 8,
            label: '产品组',
            showInput: false,
          },
        ],
      },
    ]
    return {
      departmentData: JSON.parse(JSON.stringify(departmentData)),
    }
  },

4.js部分

    //获得焦点
    focus(event) {
      // console.log(event);
      event.currentTarget.select()
    },
    //修改功能   inp
    inp(value, data) {
      data.label = value
    },
    //失去焦点后
    alters(node, data) {
      console.log(data.label)
      data.showInput = !data.showInput
      // this.focus(event)
      // this.$nextTick(function() { // //DOM 更新了
      //   this.$refs.inputVal.focus();
      // });
    },
    alter(node, data) {
      // console.log(data);
      data.showInput = !data.showInput
      // console.log(data.showInput);
      // this.focus(event)
      // this.$nextTick(function () {//DOM 更新了
      //   this.$refs.inputVal.focus()
      // })
    },