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

通过修改elementUI的el-tree（非源码），实现文档编辑器右键菜单删除文件的功能看一下流程，以示提醒。项目当前页面左侧是使用el-tree实现的文档结构。在文档中右键点击节点会弹出删除对应文件的菜单，而el-tree默认只有鼠标左键点击节点的单选高亮。现在我们需要添加一个功能，用ctrl+鼠标左键点击节点实现多选高亮，然后点击鼠标右键弹出菜单批量删除。交互如下图所示：接到需求之后，就要想好这个交互怎么做。有一些线索，但不是很清楚。担心细节没考虑好，就去研究一下vscode的功能是怎么实现的。学习竞品交互设计（偷师）是必修课。鼓捣了一阵子，大致的交互细节就搞定了。例如：ctrl+左键点击节点实现多选高亮。鼠标右键显示的菜单是根据右键节点的内容来确定的。并不是所有的节点都有删除功能，也就是不是所有的文件都可以删除，因为删除项目的一些后台文件会导致整个项目无法运行。但是crtl+左键多选可以选中所有节点，所以删除的时候需要排除不可删除的节点。在高亮节点中，删除时只会删除当前右键节点，否则会批量删除高亮节点中可以删除的节点。如果从技术上实现，需要注意以下几点：实现树的多选，需要使用show-checkbox和node-key字段显示checkbox，然后才能多选。由于UI设计中没有checkbox，所以还是需要重写样式来隐藏checkbox。使用该字段会添加一个类名el-checkbox的节点，通过css隐藏，节点的高亮是通过新添加的类名实现的。高亮时is-checked是的，所以可以添加背景根据这个类名给el-tree-node__content上色，实现高亮。由于父子节点的关联高亮不符合多选高亮时的设计和习惯，所以使用：check-strictly="true"严格遵循父子不关联。根据@node-contextmenu="handleNodeContextMenu函数获取右键节点，通过树的getCheckedNodes函数获取所有选中节点的数组，通过findIndex判断右键节点是否在其中。节点的数据将包含有关是否可以删除的信息。最终实现的代码部分如下：//html部分//通过vue-context插件实现右键菜单//css-section/deep/.el-tree-node{.is-checked>.el-tree-node__content{背景und-color:#07B6B5!important;颜色：#fff！重要；}>.el-tree-node__content{.el-checkbox{显示：无；}}}//JavaScript部分//处理tree-item被右键点击hithandleNodeContextMenu(event,data,node,nodeSelf){letdatas=this.$refs.serverTree.getCheckedNodes();//获取数据selectednodesletnodes=datas.map(data=>{returnthis.$refs.serverTree.getNode(data.path)//获取选中的节点});//datas和nodes也需要通过字段是否可以删除来??过滤不可删除的节点//下面判断右键节点是否在选中的节点中letindex=datas.findIndex(item=>{returnitem.path===数据.路径});//根据是否存在，通过getContextList函数生成对应的菜单数组menuListif(index>-1){//Ifinthis.menuList=this.getContextList(data,node,datas,nodes);}else{//如果不在this.menuList=this.getContextList(data,node);}如果(this.menuList.length>0){这个。$refs.mouseContext.openContext(event,node);//如果菜单数组不为空，则显示右键菜单的内容}}以上代码可以获取节点的详细信息数据，最后根据实际业务代码确定具体的删除代码功能