vite+vue+ts+element-plus从零开发管理后台框架(20)-多页签移除和跳转

多页签添加移除方法

编辑src/store/fastnav.ts，添加removeData方法。

removeData(path: string): string {
    if (this.datas.length <= 1) return ''

    for (let i = 0; i < this.datas.length; i++) {
        const item = this.datas[i]
        if (item.path != path) continue

        this.datas.splice(i, 1)

        if (item.path != this.currPath) return ''

        return i == 0 ? this.datas[0].path : this.datas[i - 1].path
    }

    return ''
},

可移除功能

设置tab可移除但当只有一个tab时不能移除，添加移除事件监听。

编辑src/views/Main.vue，template段多页签修改如下。

<el-scrollbar>
    <div class="navbar">
        <el-tag v-for="item in fastnavStore.datas" :type="item.path == fastnavStore.currPath ? 'primary' : 'info'" size="large" :closable="fastnavStore.datas.length != 1" @close="onTagClose(item.path)">
            {{ item.desc }}
        </el-tag>
    </div>
</el-scrollbar>

script段添加onTagClose方法。

const onCollapseSwitch = () => {
    menuStore.collapse = !menuStore.collapse
}


const onTagClose = (path: string) => {
    const pathNew = fastnavStore.removeData(path)
    if (!pathNew) return
    router.push(pathNew)
}

浏览器测试应该可以正常关闭页签，关闭后会跳转前一个页签的路由，并且当只有一个页签时不会显示关闭按钮。