效果

代码实现

页面

                <el-tree :data="treeData" :props="defaultProps" :expand-on-click-node="false"
                  :filter-node-method="filterNode" :ref="'tree_' + item.name" :id="'tree' + item.name" node-key="id"
                  :current-node-key="defaultKeys" default-expand-all highlight-current @node-click="handleNodeClick">


                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <el-input :key="data.id" autofocus size="mini" class=" w-75 text-left" :id="data.id"
                      v-show="data.isEdit" v-model="form.serviceName" @keyup.enter.native="addApiGroup" @blur="addApiGroup"></el-input>
                    <el-tooltip :content="node.label" placement="right-start" transition="el-zoom-in-top" 
                      effect="light">
                      <span v-if="!data.isEdit" class="textLine1 tree-label d-flex align-items-center">
                        <img class="imgAlign-textBottom mr-1"
                          :src="data.isGroup == 1 ? require('../../../assets/images/folder.png') : require('../../../assets/images/code.png')"
                          alt="">
                        <span class=''> {{ node.label }}</span>

                      </span>
                    </el-tooltip>
                    <el-popover v-if="data.isGroup == 1" placement="bottom-start" width="100" trigger="click"
                      id="myPopover">
                      <div>
                        <el-link class="ml-0 mb-2" :underline="false" size="mini" type="info"
                          @click="handleAdd('api', node, data)">
                          <img src="../../../assets/images/code_line.png" alt="" class="mr-2" />新增接口
                        </el-link>
                        <el-popover placement="right-start" width="100" trigger="click">
                          <el-link class="d-block ml-0  mb-2" :underline="false" size="mini" type="info"
                            @click="handleAdd('group', node, data, 'up', $event)">上方添加分组</el-link>
                          <el-link class="d-block mb-2 ml-0" :underline="false" size="mini" type="info"
                            @click="handleAdd('group', node, data, 'down')">下方添加分组</el-link>
                          <el-link class="d-block ml-0" :underline="false" size="mini" type="info"
                            @click="handleAdd('group', node, data, 'child')">添加子分组</el-link>
                          <el-link class="ml-0 mb-2 addGroup" :underline="false" size="mini" type="info"
                            slot="reference">
                            <span>
                              <img src="../../../assets/images/bulletpoint.png" alt="" class="mr-2" />新增分组
                            </span>
                            <img src="../../../assets/images/chevron-right.png" alt="" class="mr-2" />
                          </el-link>
                        </el-popover>

                        <el-link class="d-block ml-0  mb-2" :underline="false" size="mini" type="info"
                          @click="handleEdit('group', node, data)"><img src="../../../assets/images/folder_line.png"
                            alt="" class="mr-2" />编辑分组</el-link>
                        <el-link class="d-block ml-0" :underline="false" size="mini" type="info"
                          @click="handleDelete(node, data)"><img src="../../../assets/images/delete.png" alt=""
                            class="mr-2" />删除</el-link>
                      </div>
                      <el-button class="ml-2" size="mini" icon="el-icon-more" type="text" slot="reference"></el-button>
                    </el-popover>
                  </span>
                </el-tree>

js

export default {
  name: 'AppCenterDetail',
  components: { apiList },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  created() {
    
    this.form.id = this.$route.query.appId
    this.appId = this.$route.query.appId
    this.getAppDetail(this.$route.query.appId)
  },
  mounted() {
  },
  methods: {
    // 节点单击事件
    handleNodeClick(data, node) {
      this.form.serviceName = data.label
      this.queryParams.parentId = data.id
      this.defaultKeys = data.id
      let tree = {
        id: 0,
        children: this.treeData
      };

    // 调接口提交
    addApiGroup() {
     
    },
    handleAdd(node, data, pageType){

      const treeDOM = this.$refs['tree_' + this.activeName][0]
      const id = Math.ceil(Math.random() * 100);
      const newData = { id: id, parentId: data ? data.id : 0, label: '', isEdit: true, isNew: true, children: [] }

      this.$set(this.form, 'isGroup', 1)
      if (pageType == 'up') {
        this.$set(this.form, 'upOrder', data.orderNum)
        this.$set(this.form, 'isUp', 0)
        this.$set(this.form, 'orderNum', data.orderNum - 1)
        this.$set(this.form, 'parentId', data ? data.parentId : 0)
        this.$set(this.form, 'upId', data.id)
        treeDOM.insertBefore(newData, node)
        // 聚焦
        setTimeout(() => {

          document.getElementById(newData.id).focus()
        }, 500);
      } else if (pageType == 'down') {
        this.$set(this.form, 'upOrder', data.orderNum)
        this.$set(this.form, 'isUp', 1)
        this.$set(this.form, 'orderNum', data.orderNum + 1)
        this.$set(this.form, 'parentId', data ? data.parentId : 0)

        this.$set(this.form, 'upId', data.id)
        treeDOM.insertAfter(newData, node)
        // 聚焦
        setTimeout(() => {

          document.getElementById(newData.id).focus()
        }, 500);
      } else if (pageType == 'child') {
        if (this.currentNodeLevel >= 4) {
          this.$modal.msgWarning('当前树最多可加四级,已超出')
        } else {
          this.$set(this.form, 'upOrder', data.orderNum)
          this.$set(this.form, 'isUp', 2)
          this.$set(this.form, 'parentId', data.id)
          treeDOM.append(newData, node)
          treeDOM.store.nodesMap[data.id].expanded = true
          // 聚焦
          setTimeout(() => {

            document.getElementById(newData.id).focus()
          }, 500);
        }

      } else {
        this.addGroupVisible = true
        this.$set(this.form, 'parentId', 0)
        this.$set(this.form, 'isUp', 2)
      }
    },
   
    
  },
}