效果

代码实现

页面

                <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.appIdthis.appId = this.$route.query.appIdthis.getAppDetail(this.$route.query.appId)},mounted() {},methods: {// 节点单击事件handleNodeClick(data, node) {this.form.serviceName = data.labelthis.queryParams.parentId = data.idthis.defaultKeys = data.idlet 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 = truethis.$set(this.form, 'parentId', 0)this.$set(this.form, 'isUp', 2)}},},
}