资讯专栏INFORMATION COLUMN

[TsAdmin]--一款基于Vue.js+Element UI的单页无刷新(无iframe)多选项

junnplus / 2366人阅读

摘要:现在是不是有些期待这套全新的后台管理系统模板呢那现在就去看看的预览版本是什么样的吧欢迎大家对踊跃吐槽。同时也欢迎加入码友网的群更有其他学习资源和干货下载,欢迎入群。本文出至码友网一款基于的单页无刷新无多选项卡的后台管理系统模板

前言

很高兴今天在这里跟大家分享一款全新的后台管理系统UI模板--TsAdmin.

TsAdmin是码友网自主开发的一款基于Vue.js+Element UI 的单页无刷新(无iframe)多选项卡的后台管理系统模板,截图如下 :

TsAdmin中主要集成了以下的优秀功能:

一、 无限递归的左侧菜单

支持无限级递归的菜单树,你只需要提供格式规范的JSON数组对象即可,如:

[{ title: "系统设置", name: "1systemsettings", expand: true, uniqueNo: "1systemsettings", children: [{ title: "首页", name: "首页", path: "/homepage", allowClose: false, uniqueNo: "homepage", children: [] }, { title: "仪表盘", name: "仪表盘", path: "/dashboard", uniqueNo: "dashboard", allowClose: true, children: [] },{ title: "用户管理[未实现]", name: "10001usermanagement", uniqueNo: "10001usermanagement", children: [] }, { title: "角色管理[未实现]", name: "10002rolemanagement", uniqueNo: "10002rolemanagement", children: [] }, { title: "权限管理[未实现]", name: "10003permissionmanagement", uniqueNo: "10003permissionmanagement", children: [] }] }, { title: "报表设置", name: "2reportsettings", uniqueNo: "2reportsettings", expand: false, children: [{ title: "表格报表管理[未实现]", name: "20001gridreportmanagement", uniqueNo: "20001gridreportmanagement", children: [] }, { title: "图形报表管理[未实现]", name: "20002graphyreportmanagement", uniqueNo: "20002graphyreportmanagement", children: [] }] }]
二、可展开/收缩的左侧菜单

TsAdmin实现了点击头部导航的"菜单开关"来切换菜单的展开/收缩状态,并带炫酷的动画效果

三、整个页面无刷新(且以无iframe实现)

这也是TsAdmin后台模板系统框架比目前流行的其他框架更舒服的地方吧,这也是作者一直在追求和努力实现的后台管理系统的一种方式。在TsAdmin模板中,你将可以体验中SPA的流畅操作以及更好的交互体验,因为TsAdmin是页面无刷新的,也无iframe嵌套的。

四、以选项卡方式打开各个菜单对应的窗体

在TsAdmin中,你将体验到类似桌面应用的选项卡操作体验,每个菜单选项都可以以选项卡的方式在右侧的选项卡显示区域呈现。更高级的是,TsAdmin还支持将当前打开的选项卡添加到头部的工作台,当把选项卡成功添加到工作台后,便可以从工作台中重新打开或者激活对应的窗体。

五、数据双向绑定及前后端分离

数据双向绑定这是肯定的,因为TsAdmin是基于Vue.js的,至于前后端分离,目前预览版的数据还是纯文本的,所以后端还未涉及到。

现在是不是有些期待TsAdmin这套全新的后台管理系统模板呢?那现在就去看看TsAdmin的预览版本是什么样的吧

欢迎大家对TsAdmin踊跃吐槽。同时也欢迎加入码友网的QQ群:483350228,更有其他学习资源和干货下载,欢迎入群。

本文出至 码友网 《[TsAdmin]--一款基于Vue.js+Element UI的单页无刷新(无iframe)多选项卡的后台管理系统模板》

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92262.html

相关文章

  • 微前端 —— 理论篇

    摘要:现在开始从头搭建我们的微前端架构。项目源码微前端项目微前端微前端项目 1. 微前端         基于spa类的单页应用,随着企业工程项目的体积越来越大,开发的功能越来越多,页面也越来越多,项目随之也变得越来越臃肿,维护起来十分困难,往往改一个logo,或者改一个小样式,都要将项目全部重新打包一遍,维护困难,部署也困难。         因此前端在借鉴后端的微服务架构模式后,衍生了...

    wangbinke 评论0 收藏0
  • 2017 年崛起的 JS 项目

    摘要:通过对比各项目过去个月在上新增数量,来评估其在年度的受关注程度,进而选出年度领域崛起的明星项目。也许正因为上述最后一点,在中国拥有大量的拥趸。不仅被中国最大的电商平台阿里巴巴使用,也获得了与这些公司青睐。 共 4741 字,读完需 8 分钟,速读 2 分钟。我有幸参与了该项目的部分中文版翻译、校对工作,感谢 Sacha Grief,Micheal Ramberu 的统计整理,以及 Fr...

    gaara 评论0 收藏0
  • 【收藏】2019年最新Vue相关精品开源项目库汇总

    摘要:前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日,很多内容早已过期或是很多近期优秀组件未被收录,所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误,可以通过反馈给小肆。 前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日,很多内容早已过期或是很多近期优...

    williamwen1986 评论0 收藏0
  • 【收藏】2019年最新Vue相关精品开源项目库汇总

    摘要:前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日,很多内容早已过期或是很多近期优秀组件未被收录,所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误,可以通过反馈给小肆。 前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日,很多内容早已过期或是很多近期优...

    philadelphia 评论0 收藏0
  • vue 服务器端渲染 nuxt.js初探

    摘要:在调研插件后,发现无法满足以及等要求时,果断选用了做服务器渲染。布局目录该目录名为保留的,不可更改。服务器启动的时候,该目录下的文件会映射至应用的根路径下。它可以在服务端或路由更新之前被调用。可用于指定服务端返回的请求状态码。 开头还是来一段废话: 年关将近,给大家拜个早年,愿大家年会都能抽大奖,来年行大运。 废话不多说,直接进正文 项目环境: 前端vue项目, 需要将新增的几个路由页...

    bingchen 评论0 收藏0

发表评论

0条评论

junnplus

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<