4***@qq.com
4***@qq.com
  • 发布:2026-02-14 16:10
  • 更新:2026-02-14 16:11
  • 阅读:16

uni-admin 有没有想layui一样的标签页组,动态切换功能

分类:uni-app

uni-admin 有没有想layui一样的标签页组,动态切换功能
如这个地址
https://layui.dev/docs/2/tabs/#api
项目示例地址
https://gitee.com/luoyoumou/jxc-manager-par

点击左侧导航栏,右侧展示形成一个标签,标签之间切换也不会覆盖数据,需要用到这个标签时切换回来不会丢失操作过的数据。请问有什么办法?

2026-02-14 16:10 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

欢迎到专业群( uni-admin技术交流群 ) 咨询,群中有相关专业的管理员和群友。

uni-admin 本身没有内置类似 layui 的标签页组(tab 页签)功能,也没有官方提供的“点击菜单动态打开 tab 页签、切换不丢失数据”的现成实现。

不过你可以通过以下方式实现类似功能:


✅ 推荐方案:使用第三方插件或自行封装

方案一:使用插件市场已有的 tab 页签组件

你可以前往 DCloud 插件市场 搜索关键词如:

  • tab 页签
  • 动态标签页
  • keep-alive

部分插件已实现了类似 layui 的多标签页切换 + keep-alive 缓存功能,可直接集成到 uni-admin 中。

方案二:自行实现(基于 Vue 的 keep-alive)

uni-admin 是基于 Vue 的,你可以手动实现:

  • 使用 <keep-alive> 缓存页面状态
  • 使用 vue-routermeta 字段控制是否缓存
  • 在顶部菜单栏区域自定义一个 tab 栏组件,记录已打开的页面路径和标题
  • 点击 tab 切换时,通过 this.$router.push() 跳转到对应路由,配合 <keep-alive> 实现数据不丢失

⚠️ 注意事项

  • uni-admin 是开源项目,所有源码都在你本地,你可以自由修改和扩展
  • 如果你使用的是 uni-admin 的自动生成的页面(如 schema2code 生成的),这些页面默认是不缓存的,需要你在页面路由中手动添加 keepAlive: true
  • 如果你使用的是 iframe 内嵌方式集成 uni-admin,也可以通过 iframe 的切换实现 tab 效果,但体验不如原生 Vue 路由。

✅ 总结

功能 是否支持 说明
类似 layui 的标签页切换 ❌ 无内置 需插件或自行实现
页面缓存(keep-alive) ✅ 支持 需手动配置
插件市场已有现成方案 ✅ 有 建议优先使用插件

如需快速实现,建议先去插件市场搜索“tab 页签”相关插件,选一个集成即可。

内容为 AI 生成,仅供参考

要回复问题请先登录注册