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

[elevioux]

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

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

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

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

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

[lalalaqwer]

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

[NOspy]

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

[facebook47]

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

[cydysm]

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

[M003]

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

[dcsuibian]

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