通过改造elementUI的el-tree（非源码）实现类文档编辑器右键菜单删除文件功能

最近做项目遇到了一个需求，之前没写过，且对自己来说感觉实现起来有些难度，所以记录一下过程以作备忘。
项目现页面左侧是使用el-tree实现的一个文档结构，在该文档的某个节点鼠标右键弹出菜单，可以删除对应的文件，而el-tree通过鼠标左键点击节点默认只有单选高亮。现在需要增加一个功能，通过ctrl+鼠标左键点击节点实现多选高亮，再通过鼠标右键弹出菜单时可以批量删除。交互如下图所示：

接到需求，肯定就要想好这个交互怎么搞，有一些头绪，但是也不是很清晰，担心细节考虑不周，所以就去研究了一下vscode这个功能是怎么实现的，研究一下竞品的交互设计（偷师）是一个必修课嘛。

捣鼓了一阵就得出了大致的交互细节。如：

1. ctrl+左键点击节点实现多选高亮。
2. 鼠标右键显示的菜单是根据所右键的节点的内容决定的。
3. 不是所有的节点都有删除功能，也就是不是所有文件都是可以删除的，因为项目的某些后台文件删除会导致整个项目跑不起来。但是crtl+左键多选是所有节点都可以选择的，所以删除时需要排除掉不可删除的节点
4. 右键时其节点可能并没有被左键选中高亮，所以需要加一个判断，右键时，节点若不在高亮节点中，删除时只删除当前右键节点，反之，则批量删除高亮节点内可被删除的节点。

从技术上实现的话，需要注意的是以下几点：

1. 实现树的多选需要使用show-checkbox和node-key字段来显示复选框才可多选，由于UI设计里无复选框，所以还需要覆盖样式隐藏复选框，该字段的使用会多出类名为el-checkbox的节点,通过css来隐藏，而节点的高亮则通过高亮时新增的类名.is-checked来实现的，所以可以根据这个类名对el-tree-node__content增加背景颜色来实现高亮。
2. 由于多选高亮时父子节点的关联高亮是不符合设计和习惯的，所以使用:check-strictly="true"严格的遵循父子不互相关联。
3. 根据@node-contextmenu="handleNodeContextMenu函数获取右键的节点，和通过树的getCheckedNodes函数获取全部已选节点的数组，通过findIndex判断右键节点是否在其中。
4. 节点的data数据内会包含是否可以删除的信息

最后实现的代码部分内容如下：

//html部分
<el-tree
        :data="projectShowPanel"
        :props="treeProps"
        :default-expanded-keys="expandedArr"
        @node-click="handleNodeClick" //关键点
        :expand-on-click-node="false"
        @node-contextmenu="handleNodeContextMenu" //关键点
        @node-expand="nodeExpand"
        @node-collapse="nodeCollapse"
        show-checkbox //关键点
        node-key="path" //关键点
        :filter-node-method="searchNode"
        :indent="nodeIndent"
        :check-strictly="true"//关键点
        ref="serverTree"
  ></el-tree>
<mouse-menu
      :menuList="menuList"
      @handleContext="handleContext"
      ref="mouseContext"
></mouse-menu>//通过vue-context插件来实现右键菜单

//css部分
/deep/ .el-tree-node{
    .is-checked > .el-tree-node__content {
      background-color: #07B6B5 !important;
      color: #fff !important;
    }
     > .el-tree-node__content {
       .el-checkbox{
        display: none;
      }
    }
  }

//JavaScript部分
// 处理tree-item 被右键单击
    handleNodeContextMenu(event, data, node, nodeSelf) {
      let datas = this.$refs.serverTree.getCheckedNodes();//获取已选节点的数据
      let nodes = datas.map(data => {
        return this.$refs.serverTree.getNode(data.path)//获取已选节点
      });
      //datas和nodes还需要通过是否可删除的字段来过滤掉不可删除节点
      //以下判断右键节点是否在已选节点内
      let index = datas.findIndex(item => {
        return item.path === data.path
      });
      //根据是否存在，通过getContextList函数生成对应菜单数组menuList 
      if(index > -1){//若在
        this.menuList = this.getContextList(data, node, datas, nodes);
      }
      else{//若不在
        this.menuList = this.getContextList(data, node);
      }
      if (this.menuList.length > 0) {
        this.$refs.mouseContext.openContext(event, node);//若菜单数组不为空，显示右键菜单内容
      }
    }

以上代码可获取到节点的详细数据，最后再根据实际业务代码来决定具体的删除代码函数