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

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

文章图片

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

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

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

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

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

//html部分 //通过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); //若菜单数组不为空，显示右键菜单内容 } }

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