Element Plus Tree 树形控件 嵌套 Dropdown 下拉菜单 无感刷新

element plus 的 tree 组件虽然是比较好用的，但是并不能满足传统OA系统的对 树 的操作，浏览了整个element plus，Tree 树形控件 嵌套 Dropdown 下拉菜单。当然，如果简单的嵌套，似乎没什么难度，所以我给自己上了点难度，不仅要完美实现效果，还要做到无感刷新。

老规矩，先把 element tree 组件的示例代码搬过来，运行，可以有以下效果

接下来就要实现嵌套，同样需要把 Dropdown 的代码拿过来嵌套

先看效果

上代码，讲解放代码注释里

<template>
	<el-input
      v-model="filterText"
      placeholder="请输入关键字"
      class="mb-24"
    />
    <el-tree
      ref="treeRef" 
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      :expand-on-click-node="false"
      default-expand-all
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
    >
      <template #default="{ node }">
        <span>{{ node.label }}</span>
        <el-dropdown
          class="tree-dropdown"
          :style="[activeNode === node.data.$treeNodeId && 'visibility:visible']"  // 保证点击的时候能够让操作图标显示
          :hide-on-click="false"
          placement="right-start"
          trigger="click"
        >
          <span class="inline-block rotate-90">
            <el-icon
              :size="16"
            ><Histogram /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleEdit">
                重命名
              </el-dropdown-item>
              <el-dropdown-item>
                <el-dropdown
                  placement="right-start"
                >
                  <span class="flex justify-between">
                    添加<el-icon
                      :size="16"
                    ><ArrowRight /></el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleInsertBefore">
                        上方添加目录
                      </el-dropdown-item>
                      <el-dropdown-item @click="handleInsertAfter">
                        下方添加目录
                      </el-dropdown-item>
                      <el-dropdown-item
                        :disabled="node.level===3"  // 只有第一第二级才能添加子目录
                        @click="handleInsertChild"
                      >
                        添加子目录
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-dropdown
                  placement="right-start"
                >
                  <span class="flex justify-between">
                    移动<el-icon size="16"><ArrowRight /></el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        :disabled="!node.previousSibling"  // 第一个不能上移
                        @click="handleMoveUp(node)"
                      >
                        上移
                      </el-dropdown-item>
                      <el-dropdown-item
                        :disabled="!node.nextSibling"  // 最后一个不能下移
                        @click="handleMoveDown(node)"
                      >
                        下移
                      </el-dropdown-item>
                      <!-- <el-dropdown-item          // 升降级，可以做，但是没必要，暂时屏蔽，有需要的要自己实现
                        :disabled="node.level===3"    // 第三级不能降级
                        @click="handleTierDown(node)"
                      >
                        降级
                      </el-dropdown-item>
                      <el-dropdown-item
                        :disabled="node.level===1"    // 第一级不能升级
                        @click="handleUpgrades(node)"
                      >
                        升级
                      </el-dropdown-item> -->
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-dropdown-item>
              <el-dropdown-item @click="handleClone(node)">
                复制
              </el-dropdown-item>
              <el-dropdown-item @click="handleDelete">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-tree>
    
		//  弹窗自己写，我的是组件，就不放代码了
		
 </template>

<script lang="ts" setup>
import { toRefs, onMounted, ref, Ref, watch } from 'vue'
import { ElTree, ElMessage, ElMessageBox } from 'element-plus'
import { Histogram, ArrowRight } from '@element-plus/icons'
import { v4 as uuidV4 } from 'uuid'

interface Tree {
  [key: string]: any
}

const emits = defineEmits(['changeScale'])

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'label',
}

const name = ref('')              // 重命名
const activeNode = ref()          // 选中的虚拟树节点id，不是自己定义的
const activeNodeName = ref('')    // 选中树的名字，方便重命名/删除
const level = ref()               // 选中层级
const action = ref('insertBefore') as Ref<'insertBefore'|'insertAfter'|'append'>   // 当前选中的操作，因为下拉菜单是嵌套的，只能够记录当前操作。

const handleInsertBefore = () => {
  action.value = 'insertBefore'
  // 这里让你的弹窗显示
  // 弹窗.title = "添加目录"
}
const handleInsertAfter = () => {
  action.value = 'insertAfter'
  // 这里让你的弹窗显示
  // 弹窗.title = "添加目录"
}
const handleInsertChild = () => {
  action.value = 'append'
  // 这里让你的弹窗显示
  // 弹窗.title = "添加子目录"
}
const handleEdit = () => {
  action.value = 'insertAfter'
  name.value = activeNodeName.value  // 把原来的名字带到弹窗去
  // 这里让你的弹窗显示
  // 弹窗.title = "修改目录"
}
const handleClone = async (node) => {
  try {
    await ElMessageBox.confirm(`确定复制该模板吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    })
    const { $treeNodeId, ...newData } = node.data
    if (treeRef.value) treeRef.value.insertAfter(newData, $treeNodeId)  // 复制的原理就是，在改节点下方复制一个一模一样的，原则来说，包含的id是要替换掉新的，这个就得涉及到结构赋值了。
    activeNode.value = ''  // 清空选中的节点id，让图标隐藏
  } catch (err) {
    ElMessage({ message: '已取消', showClose: true, type: 'info' })
    return
  }
}
const handleDelete = async () => {
  try {
    await ElMessageBox.confirm(`是否删除 ${activeNodeName.value}？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    })
    if (treeRef.value) treeRef.value.remove(activeNode.value)
    activeNode.value = ''  // 清空选中的节点id，让图标隐藏
  } catch (err) {
    ElMessage({ message: '已取消', showClose: true, type: 'info' })
    return
  }
}
const handleMoveUp = (node) => {  // 上移的原理就是现在选中节点上方复制一个一模一样的节点，然后删掉原来那个
  const { $treeNodeId, ...newData } = node.data
  if (treeRef.value) treeRef.value.insertBefore(newData, node.previousSibling.data.$treeNodeId)
  if (treeRef.value) treeRef.value.remove($treeNodeId)
}
const handleMoveDown = (node) => {  // 下移的原理就是现在选中节点下方复制一个一模一样的节点，然后删掉原来那个
  const { $treeNodeId, ...newData } = node.data
  if (treeRef.value) treeRef.value.insertAfter(newData, node.nextSibling.data.$treeNodeId)
  if (treeRef.value) treeRef.value.remove($treeNodeId)
}
// const handleTierDown = (node) => {
//   console.log(node)
// }
// const handleUpgrades = (node) => {
//   console.log(node)
// }

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

const data: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const handleNodeClick = (event) => {
  console.log(event)
  activeNode.value = event.$treeNodeId  // 选中的节点树id
  activeNodeName.value = event.label    // 选中的名字
  level.value = event.level             // 选中的层级
}

const handleSubmit = () => {  //  这里是你的弹窗做出正确选择的时候触发
  submitBoxProps.value.visible = false
  const data: object = {
    id: uuidV4(),        // 定义新的id，这里用的是uuid，你可以先跑跟后端约定好的接口，让他把对应的 data 返回给你
    label: name.value,   // 你弹窗输入的内容（节点名字）
  }
  level.value === 3 ? Object.assign(data, { // 你的第三级自己的内容 }) : Object.assign(data, {children: []})  // 根据层级，重新重构data
  if (action.value === 'insertBefore' && treeRef.value) treeRef.value.insertBefore(data, activeNode.value)  // 上方插入
  if (action.value === 'insertAfter' && treeRef.value) treeRef.value.insertAfter(data, activeNode.value)   // 下方插入
  if (action.value === 'append' && treeRef.value) treeRef.value.append(data, activeNode.value)        // 子插入
  activeNode.value = ''
}
</script>

<style lang="scss" scoped>
.template-tree {
  width: 300px;
  height: max-content;
  background: #ffffff;

  :deep(.el-tree-node__content) {
    .tree-dropdown {
      visibility: hidden;  // 默认让菜单时隐藏的
    }
  }
  :deep(.el-tree-node__content:active),
  :deep(.el-tree-node__content:hover) {
      .tree-dropdown {
        visibility: visible !important;  // 菜单显示
      }
    }
}
</style>

注意：每一个方法都应该配合后端来实现的，无感刷新的原理是，前端手动更改了树，而不是每掉一次后端接口就刷新获取数据。

希望能帮到您。