如何用 vue3 做一个有多标签的后台管理系统？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 470 天前的主题，其中的信息可能已经有所发展或是发生改变。

例如左侧边栏中有一个“产品列表”的菜单，点击后在右侧内容区新建一个 tab ，并展示相关内容。

上面这一个部分我已经做到。

但遇到的问题是，当用户多次点击“产品列表”菜单后，产生多个 tab ，其内容都是相同的(更改其中一个 tab ，会同步数据到所有 tab)。而我希望内容各自相互独立，也就是各个 tab 实例互不干扰（毕竟用户可以在不同的 tab 搜索不同的内容）。

google 了老半天，还是没找到方法，求教。

第 1 条附言 · 2023-09-10 10:53:38 +08:00

搞定了。直接 v-for 包住 component ，动态创建多个 “产品列表” 的组件，再根据 tab index 来隐藏非当前的 tab 。感觉有点不干净，不过先这样了。。。。

tab

内容

列表

菜单

6 条回复 • 2023-09-09 13:34:52 +08:00

lalalaqwer

2023-09-09 12:45:03 +08:00

这个是你的数据存储问题，多个 tab 共用了一个数据，按你的需求应该给每个 tab 设置独立存储

NOspy

2023-09-09 12:57:27 +08:00

和 1l 老哥说的一样，每次点击产品列表都新建一个数据，单独绑定

facebook47

2023-09-09 12:59:04 +08:00 via Android

https://github.com/ems-admin/ems-admin-vue3 这个可以满足你的需求

cydysm

2023-09-09 13:08:58 +08:00 via iPhone

那我有个问题，如果所有 tab 关闭后，再打开是以哪个 tab 的状态为准

M003

2023-09-09 13:29:27 +08:00

维护 tabs . 每个 tab 应该有个 no, 每个 tab 根据数组里的 no 进行接口调用,然后渲染页面
[
{
tabName:'xxxx',
no:'xxx',
title:'xxx',
....
},
...
]
===
不知道是不是同一个想法. 如果同一个 tab .不应该让多次点击产生多个相同的 tab,而是更新已存在 tab 的 no, 然后 no 变化了,就重新调接口 < tabName 相同就不应该再次打开新 tab>.
======
如果说是类似于产品详情页. 需要同一个 tabName 根据 no 不同进行渲染. 那就.直接往 tabs 丢内容就行,一直 push.

dcsuibian

2023-09-09 13:34:52 +08:00 via Android

你的 data 是个对象还是个方法