程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

效果：

 对tree组件封装成treeComponent 组件，内容如下，从项目中选取

 <el-tree
      ref="tree"
      v-loading="loading"
      :data="treeData"
      v-bind="treeProps"
      @current-change="onCurrentChange"
>
      <div slot-scope="{ node, data }" class="custom-tree-node">
          <span v-if="!data.showInput"> {{ node.label }}</span>
          <el-input
            v-else
            ref="inputVal"
            size="mini"
            :value="data.name.trim()"
            style="width:150px"
            :autofocus="true"
            @blur="onSaveNode( data)"
            @input="a => onInput(a, data)"
          />
          <div class="options">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-edit"
              @click.stop="() => onEditNode(data)"
            />
            <el-button
              type="text"
              size="mini"
              icon="el-icon-plus"
              @click.stop="() => $emit('append-node', data)"
            />
            <confirm-button
              :button-props="buttonProps"
              :ok-button-props="okButtonProps"
              :content="`确认删除此节点吗？`"
              @ok="$emit('delete-node', data)"
            />
          </template>
     </div>
</el-tree>
<script>
export default {
    data() {
        return {
            oldNodeName: '',
            treeData: [],
        }
    },
    computed: {
        treeProps() {
          return {
            props: {
              label: 'name'
            },
            'node-key': 'id',
            'default-expand-all': true,
            'expand-on-click-node': false,
            'highlight-current': true,
            ...this.$attrs
          }
        }
    },
    mounted() {
       // treeData 你的数据,结构类似
       // const treeData = [
       //    {
       //     id: 1,
       //     name: '一级 1',
       //     showInput: false,  // 作用：是否显示input框
       //     children: [
       //       {
       //         id: 4,
       //         name: '二级 1-1',
       //         showInput: false,
       //         children: [
       //           {
       //             id: 9,
       //             name: '三级 1-1-1',
       //             showInput: false // 作用：是否显示input框
       //           },
       //          {
       //             id: 10,
       //             name: '三级 1-1-2',
       //             showInput: false // 作用：是否显示input框
       //       }
       //     ]
       //   }
       // ]
       this.treeData = treeData 
    },
    // 点击修改节点
    onEditNode(data) {
      this.onChangeShowInput(data)
      this.oldNodeName = data.name.trim()
      this.$nextTick(() => {
        this.$refs.inputVal.focus()
      })
    },
    // input框编辑失去焦点
    onSaveNode(data) {
      if (this.oldNodeName !== data.name.trim()) {
        this.$emit('edit-node', data, (isOk) => {
          if (isOk) {
            this.onChangeShowInput(data)
          } else {
            this.$refs.inputVal.focus()
          }
        })
      } else {
        this.onChangeShowInput(data)
      }
    },
    onInput(value, data) {
      data.name = value
    },
    onChangeShowInput(data) {
      data.showInput = !data.showInput
    },
    onCurrentChange() {
    }
}
</script>

原文链接:https://blog.csdn.net/ismmc/article/details/120435946