持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

本文是项目实战篇，要实现一个类似百度云点击文件夹进入下一级后，左上角出现可点击的面包屑，最近项目中要开发一个资源库，也会出现层层文件夹这样的需求。我们一起看看吧~

QQ图片20220608104631.png

左上角菜单层级

html代码

<div class="breadcrumb">
    <span :class="pathList.length - 1 !== i?'fold':''" v-for="(item,i) in pathList" :key="i" @click="skipBread(item, i)">
        <span class="txt-overflow file-title">{{item.name}}</span>
        <i class="el-icon-arrow-right" v-if="pathList.length - 1 !== i"></i>
    </span>
</div>

点击面包屑文件夹，跳转到对应的文件夹，加载对应的文件夹下的文件数据

// 跳转左上角层级
skipBread(node, index) {
    let len = this.pathDialogList.length;
    for(let i = len;i > index;i--){
        this.pathDialogList.splice(i, 1);
        len = this.pathDialogList.length;
    }
    this.getFoldList(node.id);
}

列表点击文件夹名称，跳转到子文件夹

// 跳转下一级文件夹
skipNext(row) {
    this.pathList.push(row);
    this.searchForm.fid = row.id;
    this.getList();
},

按钮，新建文件夹

// 新建文件夹
addFolder(flag) {
    if(!this.isNoSave){
        this.tableDataMove.unshift({isEdit: true});
        this.isNoSave = true;
    }else {
        this.$message({
            message: '存在未保存的数据，请先保存',
            type: 'error'
        })
    }
},

移动

QQ图片20220608104636.png

点击某一个文件的操作按钮，移动，就会出现弹框查询所有的文件夹，和页面的列表一样，可以一层层的点击进入下一级，点击确定的时候，掉接口。关闭弹框

弹框新增文件夹

QQ图片20220608105023.png

同样，弹框中也可以新增文件夹，点击新增文件夹按钮，列表unshift一列，保存时候校验文件夹名字必填。取消时候，删除这一列。

// 取消文件夹
cancelFold(row, index, flag){
    // flag 代表弹框 因为弹框操作和列表操作一样的，所以掉同一个方法用flag区分是弹框
    if(flag) {
        // id 用来区分是编辑已存在数据库的数据，还是本次新增的还未加入到数据库的数据
        if(row.id){
            this.$set(this.tableDataMove[index], 'isEdit', false) ;
        }else {
            this.tableDataMove.splice(index, 1);
        }
    }else {
        // 列表数据
        if(row.id){
            this.$set(this.tableData[index], 'isEdit', false) ;
        }else {
            this.tableData.splice(index, 1);
        }
    }
    this.isNoSave = false;
},

Vue-实战篇-多级文件夹导航

左上角菜单层级

移动