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.vuetemplate 段多页签修改如下。

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

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

本作品采用《CC 协议》,转载必须注明作者和本文链接