ElementUI tree 删除节点时，高亮选中其附近节点

HTML

    
        
        
        

        
        

            
                
                    
                
                
                    
                        新建
                    
                    
                        编辑
                    
                    
                        删除
                    
                
            
        

        
        {{ data.name }}
    

JS

/**
 * 删除
 * @param {Object} data 节点对象
 */
delete(data){
    this.$msgbox({
        title: '提示', // 标题
        message: data.type == 1 ? `此操作将永久删除此问题集，是否继续？` : `此操作将永久删除此问题，是否继续？`, // MessageBox 消息正文内容
        customClass: 'deleteAppMsgbox', // 自定义类名
        showConfirmButton: true, // 是否显示确定按钮
        showCancelButton: true, // 是否显示取消按钮
        confirmButtonText: '确定', // 确定按钮的文本内容
        cancelButtonText: '取消', // 取消按钮的文本内容
        confirmButtonClass: 'sureBtn', // 确定按钮的自定义类名
        cancelButtonClass: 'cancelBtn', // 取消按钮的自定义类名
        closeOnClickModal: false, // 是否可通过点击遮罩关闭 MessageBox
        closeOnPressEscape: false, // 是否可通过按下 ESC 键关闭 MessageBox
        type: 'warning',
    }).then(() => {
        this.$axios.questionBank.delete({
            id: data.id
        }).then(res => {
            if(res.data.data == '200'){
                // 获取高亮的节点
                // let getCurrentNode = this.$refs.catalogTree.getCurrentNode();
                // 判断删除的节点是否是高亮的节点
                // if(data.id === getCurrentNode.id) {}

                // 获取 删除的节点的 Node
                let deleteNode = this.$refs.catalogTree.getNode(data.id);
                // 定义变量：即将要跳转的节点
                let nodeToJump = null;
                // 删除的节点前后都没有相邻节点，获取父级节点
                if(!deleteNode.previousSibling && !deleteNode.nextSibling){
                    nodeToJump = deleteNode.parent;
                // 删除的节点后面有相邻节点，获取后面的节点
                }else if(deleteNode.nextSibling){
                    nodeToJump = deleteNode.nextSibling;
                // 删除的节点后面没有相邻节点，前边有相邻节点，获取前面的节点
                }else if(deleteNode.previousSibling && !deleteNode.nextSibling){
                    nodeToJump = deleteNode.previousSibling;
                }

                // 设置节点选中
                this.$refs.catalogTree.setCurrentKey(nodeToJump.data.id);

                // 跳转对应详情页，由于相邻节点不一定是文件夹或者不一定是文件，所以加判断：1：文件夹，2：文件
                if (deleteNode.previousSibling.data.type == '1') {
                    this.$router.push({
                        name: 'folderView',
                        query: { id: deleteNode.previousSibling.data.id }
                    });
                } else {
                    this.$router.push({
                        name: 'fileView',
                        query: { id: deleteNode.previousSibling.data.id }
                    });
                }


                // 删除节点
                this.$refs.catalogTree.remove(data);

                // 重置缓存
                window.localStorage.zsyftxglptMh = JSON.stringify(this.storage);

                this.$message.success('删除成功');
            }else{
                this.$message.error('当前文件夹存在内容，请先清空内容后，再删除当前文件夹');
            }
        })
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        }); 
    });
}

style

::v-deep.catalogTreeBox{
    height: calc(100% - 40px);
    .catalogTree{
        .el-tree-node{
            .el-tree-node__content{
                height: 40px;
                .customTreeNode{
                    display: block;
                    flex:1;
                    height: 24px;
                    line-height: 24px;
                    overflow: hidden;
                    .nodeIcon{
                        float: left;
                        width:20px;
                        height:24px;
                        margin-right: 6px;
                        &.iconFolder{
                            background: url(../../../assets/images/mainCatalog/icon-mainCatalog-folder.png) no-repeat center center;
                        }
                        &.iconFile{
                            background: url(../../../assets/images/mainCatalog/icon-mainCatalog-file.png) no-repeat center center;
                        }
                    }
                    .more{
                        display: none;
                        padding:0;
                        color: #9CA6BC;
                        width:24px;
                        height: 24px;
                        margin: 0 8px;
                        line-height: 24px;
                        text-align: center;
                    }
                    .nodeText{
                        display: block;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        padding-right: 10px;
                    }
                }
                &:hover{
                    background: #ecf5ff;
                }
            }
        }
        .el-tree-node.is-current{
            & > .el-tree-node__content{
                background: #f1f1f2;
                .more{
                    display: block;
                }
            }
        }
    }
}