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

This topic created in 978 days ago, the information mentioned may be changed or developed.

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

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

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

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

Supplement 1 Sep 10, 2023

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

tab

内容

列表

菜单

6 replies 2023-09-09 13:34:52 +08:00

lalalaqwer

Sep 9, 2023

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

NOspy

Sep 9, 2023

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

facebook47

Sep 9, 2023 via Android

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

cydysm

Sep 9, 2023 via iPhone

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

M003

Sep 9, 2023

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

dcsuibian

Sep 9, 2023 via Android

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