关于为element Tree组件实现仿文件夹效果及右键菜单

<template>
    <div class="custom-tree-container" @contextmenu.native="handlePaste($event)">
      <!-- <el-tree :data="dataSource" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
        :render-content="renderContent" @node-contextmenu="" /> -->
      <div class="search">
        <el-input placeholder="输入关键字进行搜索" v-model="filterText" @keyup.enter.native="searchUp" @blur="searchUp" clearable
          style="margin-right: 8px;"></el-input>
        <el-button type="primary" @click="setAllNode">
          <el-icon>
            <Expand v-if="allNode" />
            <Fold v-else />
          </el-icon>
        </el-button>
      </div>
      <el-tree ref="treeRefs" :data="dataSource" node-key="id" default-expand-all expand-on-click-node
        @node-contextmenu="nodeContextmenu" :props="{ value: 'id', label: 'name', children: 'children' }"
        :filter-node-method="filterMethod" draggable @node-drop="dropSuccess">
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <div v-if="data.id !== reNameId">{{ data.name }}</div>
  
            <el-input v-else size="small" v-model="data.name" @blur="inputBlur(data.name)" v-focus />
            <!-- <span>
              //自定义节点内容
              <a @click="append(data)"> Add </a>
              <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
              </span> -->
          </div>
        </template>
      </el-tree>
      <!-- Dialog -->
      <el-dialog v-model="removeVisible" title="确认删除" width="30%" :before-close="handleClose">
        <span>此操作将删除当前节点及全部子节点,确认是否删除?</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="remove(true)">
              确认
            </el-button>
            <el-button @click="remove(false)">取消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- Menu -->
      <div class="menu" v-show="menuState">
        <div class="menu-item menu-rename" @click="rename">重命名</div>
        <div class="menu-item menu-add-peer" @click="addPeer">添加同级节点</div>
        <div class="menu-item menu-add-sublevel" @click="addSublevel">添加子级节点</div>
        <div class="menu-item menu-set-property" @click="setProperty">设置属性</div>
        <div class="menu-item menu-del-node" @click="delNode">删除</div>
      </div>
      <div class="blur" @click="unBlur('blur')" v-show="menuState" @contextmenu.native="handlePaste($event)"></div>
    </div>
  </template>
    
  <script setup>
  import { getCurrentInstance, ref } from 'vue'
  
  const menuState = ref(false)
  const contextMenuRow = ref(null) //右键存储数据
  const parentMenuRow = ref(null) //右键节点父级
  const reNameId = ref(null) //重命名记录
  const reName = ref(null) //重命名记录
  const removeVisible = ref(false)
  
  const filterText = ref('')
  const allNode = ref(false)
  const treeRefs = ref(null);
  const { proxy } = getCurrentInstance();
  
  const dataSource = ref([
    {
      id: 1,
      name: '一级 1',
      pid: null,
      children: [
        {
          id: 4,
          name: '二级 1-1',
          pid: 1,
          children: [
            {
              id: 9,
              name: '三级 1-1-1',
              pid: 4,
            },
            {
              id: 10,
              name: '三级 1-1-2',
              pid: 4,
            },
          ],
        }, {
          id: 36,
          name: '二级 2-1',
          pid: 1,
          children: [
            {
              id: 202,
              name: '三级 1-2-1',
              pid: 36,
            },
            {
              id: 109,
              name: '三级 1-2-2',
              pid: 36,
            },
          ],
        },
      ],
    },
    {
      id: 2,
      name: '一级 2',
      pid: null,
      children: [
        {
          id: 5,
          name: '二级 2-1',
          pid: 2,
        },
        {
          id: 6,
          name: '二级 2-2',
          pid: 2,
        },
      ],
    },
    {
      id: 3,
      name: '一级 3',
      pid: null,
      children: [
        {
          id: 7,
          name: '二级 3-1',
          pid: 3,
        },
        {
          id: 8,
          name: '二级 3-2',
          pid: 3,
        },
      ],
    },
  ])
  
  const handlePaste = (event) => {
    
    // 禁用鼠标右键
    event.preventDefault()
    //关闭菜单
    
    return false
  }
  
  //设置新数据 
  const updateKeyChildren = (key, value) => {
    console.log('为节点设置新数据', key, value)
  }
  
  //右击事件
  const nodeContextmenu = (event, data, node) => {
    console.log('nodeContextmenu', data, node)
    contextMenuRow.value = data
    if (data.pid) {
      parentMenuRow.value = node.parent.data
    }
  
  
    //show menu
    let menu = document.querySelector('.menu')
    menu.style.left = event.x + 8 + 'px'
    menu.style.top = event.y + 'px'
    menuState.value = true
  }
  
  
  
  const rename = () => {
    reNameId.value = contextMenuRow.value.id
    reName.value = contextMenuRow.value.name
    //关闭菜单
    menuState.value = false
  }
  
  const unBlur = (state) => {
    console.log('取消操作菜单')
    if (state == 'inputName') {
      reName.value = null
      reNameId.value = null
      contextMenuRow.value = null
      parentMenuRow.value = null
      return
    }
    if (state == 'addChild') {
      menuState.value = false
      contextMenuRow.value = null
      parentMenuRow.value = null
    }
    if (state == 'remove') {
      menuState.value = false
      reName.value = null
      reNameId.value = null
      contextMenuRow.value = null
      parentMenuRow.value = null
    }
    if(state == 'blur'){
      menuState.value = false
      reName.value = null
      reNameId.value = null
      contextMenuRow.value = null
      parentMenuRow.value = null
    }
  }
  
  const inputBlur = (name) => {
    console.log('更新命名', name)
    if (reName.value !== name) {
      console.log('调用接口,更新list')
    }
    unBlur('inputName')
  }
  
  const addSublevel = () => {
    const addId = +new Date()
    const newChild = { id: addId, name: '未命名', children: [] }
    reName.value = '未命名'
    reNameId.value = addId
    if (!contextMenuRow.value.children) {
      contextMenuRow.value.children = []
    }
    contextMenuRow.value.children.push(newChild)
    dataSource.value = [...dataSource.value]
    unBlur('addChild')
  }
  
  const addPeer = () => {
    const addId = +new Date()
    const newChild = { id: addId, name: '未命名', children: [] }
    reName.value = '未命名'
    reNameId.value = addId
    //静态添加
    if (parentMenuRow.value) {
      if (!parentMenuRow.value.children) {
        parentMenuRow.value.children = []
      }
      parentMenuRow.value.children.push(newChild)
      dataSource.value = [...dataSource.value]
    } else {
      console.log('没有父级节点')
      dataSource.value.push(newChild)
    }
    unBlur('addChild')
  }
  
  const delNode = (node, data) => {
    console.log('删除,弹窗', node, data, removeVisible)
    removeVisible.value = true
  }
  const handleClose = () => {
    console.log('handleClose')
    removeVisible.value = false
    unBlur('remove')
  }
  const remove = (bool) => {
    if (bool) {
      console.log('调用删除')
    }
    removeVisible.value = false
    unBlur('remove')
  }
  
  // 展开收起所有节点
  const setAllNode = () => {
    //一级展开不关注child
    let treeList = dataSource.value;
    for (let i = 0; i < treeList.length; i++) {
      treeRefs.value.store.nodesMap[treeList[i].id].expanded = allNode.value;
    }
    allNode.value = !allNode.value
    //全部展开，但会出现卡顿
    // const nodes = treeRefs.value.store._getAllNodes();
    // nodes.forEach(item => {
    //   item.expanded = allNode.value;
    // })
  }
  
  watch(filterText, (val) => {
    proxy.$refs.treeRefs.filter(val);
  })
  
  const searchUp = () => {
    if (filterText.value && filterText.value.length) {
      proxy.$refs.treeRefs.filter(filterText.value);
      allNode.value = false
    } else {
      let treeList = dataSource.value;
      for (let i = 0; i < treeList.length; i++) {
        treeRefs.value.store.nodesMap[treeList[i].id].expanded = false;
      }
      allNode.value = false
    }
  }
  
  const filterMethod = (query, data) => {
    return data.name.includes(query)
  }
  
  const dropSuccess = (node, toItem, position, event) => {
    console.log('拖拽', node, toItem, position, event)
  }
  
  </script>
    
  <style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  
  .menu {
    width: 120px;
    z-index: 999;
    background-color: #ffffff;
    position: fixed;
    text-align: left;
    box-shadow: 0px 0px 5px 1px rgba(102, 102, 102, 0.35);
  }
  
  .blur {
    width: 100%;
    height: 100%;
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .menu-item {
    padding-left: 10px;
    color: #333333;
    font-size: 13px;
    line-height: 24px;
    margin: 8px 0;
  }
  
  .menu-item:hover {
    background-color: #EBF5FF;
  }
  
  .search {
    margin-bottom: 10px;
    display: flex;
  }
  </style>
    
  
  
  
  
  
  //树形结构接口需求
  {
    "id": 4, //节点id
    "name": "二级 1-1", //节点name
    "children": [ //子节点数组
        {
            "id": 9,
            "name": "三级 1-1-1",
            "children":[],
            "pid":4
        },
        {
            "id": 10,
            "name": "三级 1-1-2",
            "children":[],
            "pid":4
        }
    ],
    "pid":2, //父级id
    //setAttribute或attributeList
    "setAttribute":'TY', //节点身份属性，取决于二级菜单展示内容
    "attributeList":[ //节点二级菜单内容
      {
        "id": 129,
        "name": "属性1",
        ...
      },
      {
        "id": 103,
        "name": "属性2",
        ...
      } 
    ]
  }