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

2021-07-07  本文已影响0人  Cherry丶小丸子
HTML
<el-tree
    :data="rootNodeData"
    class="catalogTree"
    ref="catalogTree"
    highlight-current
    node-key="id"
    lazy
    :load="treeLoadNode"
    
    :expand-on-click-node="false"
    @node-click="catalogTreeNodeClickEvent"
    :props="{isLeaf : 'isLeaf'}">
    <span class="customTreeNode" slot-scope="{ node, data }">
        <!-- 节点图标    文件夹图标:data.type == '1'    文件图标:data.type == '2' -->
        <span class="nodeIcon iconFolder" v-if="data.type == '1'"></span>
        <span class="nodeIcon iconFile" v-if="data.type == '2'"></span>

        <!-- 节点操作 -->
        <div @click.stop>
            <el-dropdown class="catalogOperationDropdown fr" placement="bottom-end" trigger="click" v-if="data.permissionType=='2'">
                <span class="el-dropdown-link">
                    <i class="more el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="catalogOperationPopper">
                    <el-dropdown-item @click.native="new(data)">
                        <i class="my-icon icon-folder"></i><span>新建</span>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="edit(data)">
                        <i class="my-icon icon-edit"></i><span>编辑</span>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="delete(data)">
                        <i class="my-icon icon-delete"></i><span>删除</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <!-- 节点文字 -->
        <span class="nodeText">{{ data.name }}</span>
    </span>
</el-tree>
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'){
                this.$message.success('删除成功');

                // 获取 删除的节点
                let currentNode = this.$refs.catalogTree.getNode(data.id);
                // 获取 删除的节点 的 父级节点
                let parentNode = currentNode.parent;
                // 定义变量:删除的节点 的所有同级节点
                let sameLevelNode = [];
                // 定义变量:同级节点 的 长度
                let childNodesLength = 0;

                // 当获取的父级节点不为 null 时(有父级节点)
                if(parentNode != null){
                    // 同级节点赋值
                    sameLevelNode = parentNode.childNodes;
                    // 同级节点的长度赋值
                    childNodesLength = sameLevelNode.length;
                }else{ // 当获取的父级节点为 null 时(没有父级节点)
                    // 获取全部节点
                    let allNodes = this.$refs.catalogTree.store._getAllNodes();
                    // 定义变量:所有 level 等于 1 的所有节点
                    let allFirstLevelNodes = [];
                    // 遍历节点
                    for(let i = 0; i < allNodes.length; i++){
                        if(allNodes[i].level == 1){
                            allFirstLevelNodes.push(allNodes[i]);
                        }
                    }// 如果只有一个子节点
                        if(i == 0 && childNodesLength == 1){ // 如果只有一个子节点
                            // 删除后设置父级节点选中
                    // 将 level 等于 1 的所有节点赋值给同级节点
                    sameLevelNode = allFirstLevelNodes;
                    // 同级节点的长度赋值
                    childNodesLength = allFirstLevelNodes.length;
                }

                for(let i = 0; i < childNodesLength; i++){
                    if(sameLevelNode[i].data.id == data.id){ // 在所有同级节点中 查找 与删除的节点id相同的节点
                        if((sameLevelNode[i].previousSibling === null || sameLevelNode[i].previousSibling === undefined) && (sameLevelNode[i].nextSibling === null || sameLevelNode[i].nextSibling === undefined)){ // 如果只有一个子节点
                            // 删除后设置父级节点选中
                            this.$refs.catalogTree.setCurrentKey(parentNode.data.id);
                            // 重置缓存
                            this.storage.treeNodeObj = parentNode.data;
                            // 设置面包屑二级
                            this.breadCrumbData.levelTwo = parentNode.data.name;
                            // 跳转对应详情页,由于父级节点一定是问题集(文件夹),所以不用加判断
                            this.$router.push({ name: 'questionSetsView', query: { id: parentNode.data.id }});
                        // }else if(sameLevelNode[i].nextSibling !== null || sameLevelNode[i].nextSibling !== undefined){
                        }else if(sameLevelNode[i].nextSibling !== null && sameLevelNode[i].nextSibling !== undefined){ // 当前子节点后面(同级)还有节点
                            // 删除后设置当前节点的后面的一个节点选中
                            this.$refs.catalogTree.setCurrentKey(sameLevelNode[i + 1].data.id);
                            // 重置缓存
                            this.storage.treeNodeObj = sameLevelNode[i + 1].data;
                            // 设置面包屑二级
                            this.breadCrumbData.levelTwo = sameLevelNode[i + 1].data.name;
                            // 跳转对应详情页,由于相邻节点不一定是问题集或者不一定是问题,所以加判断:1问题集(文件夹),2问题(文件)
                            if(sameLevelNode[i + 1].data.type == '1'){
                                this.$router.push({ name: 'questionSetsView', query: { id: sameLevelNode[i + 1].data.id }});
                            }else{
                                this.$router.push({ name: 'questionView', query: { id: sameLevelNode[i + 1].data.id }});
                            }
                        }else if((sameLevelNode[i].previousSibling !== null && sameLevelNode[i].previousSibling !== undefined) && (sameLevelNode[i].nextSibling === null || sameLevelNode[i].nextSibling === undefined)){ // 当前子节点后面(同级)没有节点
                            // 删除后设置当前节点的前面的一个节点选中
                            this.$refs.catalogTree.setCurrentKey(sameLevelNode[i - 1].data.id);
                            // 重置缓存
                            this.storage.treeNodeObj = sameLevelNode[i - 1].data;
                            // 设置面包屑二级
                            this.breadCrumbData.levelTwo = sameLevelNode[i - 1].data.name;
                            // 跳转对应详情页,由于相邻节点不一定是问题集或者不一定是问题,所以加判断:1问题集(文件夹),2问题(文件)
                            if(sameLevelNode[i - 1].data.type == '1'){
                                this.$router.push({ name: 'questionSetsView', query: { id: sameLevelNode[i - 1].data.id }});
                            }else{
                                this.$router.push({ name: 'questionView', query: { id: sameLevelNode[i - 1].data.id }});
                            }
                        }
                        break;
                    }
                }

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

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

            }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;
                }
            }
        }
    }
}

上一篇下一篇

猜你喜欢

热点阅读