vue+element tabs选项卡分页效果


Posted in Javascript onJune 29, 2020

本文实例为大家分享了vue+element tabs选项卡分页效果的具体代码,供大家参考,具体内容如下

文件目录:

vue+element tabs选项卡分页效果

功能展示:

vue+element tabs选项卡分页效果

vue+element tabs选项卡分页效果

路由配置:

{
 path: '/account',
 component: ()=> import('../components/home/home.vue'), //布局页面
 redirect: '/account/all-account/list', //定向到list路径
 name: '账号管理',
 children: [
  {
  path: '/account/all-account/list',
  redirect: '/account/all-account/staff', //定向到staff路径
  name: '员工管理',
  component: () => import('../components/view/account/index.vue'),
  children: [
   {
   path: '/account/all-account/staff',
   component: () => import('../components/view/account/account.vue'),
   hidden: true
   },
   {
   path: '/account/all-account/agent',
   name: '代理人账号',
   component: () => import('../components/view/account/agent.vue'),
   hidden: true
   },
   {
   path: '/account/all-account/department',
   name: '部门设置',
   component: () => import('../components/view/account/department.vue'),
   hidden: true
   },
   {
   path: '/account/all-account/role',
   name: '角色权限设置',
   component: () => import('../components/view/account/role.vue'),
   hidden: true
   },
   {
   path: '/account/all-account/city',
   name: '城市管理',
   component: () => import('../components/view/account/city.vue'),
   hidden: true
   },
  ]
  },
}

组件代码:

index.vue

<template>
 <div class="page_container" style="overflow:auto;height:100%;background: #ffffff;padding: 10px;min-width:1200px;">
 <router-view />
 </div>
</template>

account.vue

<template>
<!-- 账号管理tab分页 -->
 <div id="employeeCareMng" class="page_container" style="overflow:auto;height:100%;background: #ffffff;min-width:1200px;">
 <div v-if="isNative" >
  <div style="height:100%;">
  <el-tabs v-model="activeName" style="height:100%;" @tab-click="handleClick">
   <el-tab-pane label="员工账号" name="first" style="height:100%;">
   <staff/>
   </el-tab-pane>
   <el-tab-pane label="代理人账号" name="second" style="height:100%;">
   <agent/> 
   </el-tab-pane>
   <el-tab-pane label="部门设置" name="third" style="height:100%;">
   <department/> 
   </el-tab-pane>
   <el-tab-pane label="角色权限设置" name="fourth" style="height:100%;">
   <role/> 
   </el-tab-pane>
   <el-tab-pane label="城市管理" name="fifth" style="height:100%;">
   <city/> 
   </el-tab-pane>
  </el-tabs>
  </div>
 </div>
 <div v-else style="height:100%;">
  <router-view />
 </div>
 </div>
</template>
<script>
import staff from './staff'
import agent from './agent'
import department from './department'
import role from './role'
import city from './city'
 
export default {
 components: {
 staff,agent,department,role,city
 },
 data() {
 return {
  isNative: true,
  activeName: 'first' //默认先渲染第一个
 }
 },
 //页面初始默认是第一个板块展示
 created() {
 if (this.$route.path === '/account/all-account/staff') {
  this.isNative = true
 } else {
  this.isNative = false
 }
 },
 methods: {
 handleClick(tab, event) {
  console.log(tab, event)
 }
 }
}
</script>
<style scoped>
.page_container{
 background: #ffffff;
 height: 100%;
}
</style>
<style >
#employeeCareMng .el-tabs__content {
 height:calc(100% - 55px);
}
</style>

其他tabs分页的组件:

staff.vue  其他类似

<template>
 <div class="staff">
  员工账号
 </div>
</template>
 
<script>
export default {
 name:"staff",
 data(){
  return {
   
  }
 },
 created(){
  
 },
 methods: {
 
 },
  
 
};
</script>
 
<style scoped>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
js+css在交互上的应用
Jul 18 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
layui实现根据table数据判断按钮显示情况的方法
Sep 26 #Javascript
vue+element表格导出为Excel文件
Sep 26 #Javascript
利用layer实现表单完美验证的方法
Sep 26 #Javascript
vue点击当前路由高亮小案例
Sep 26 #Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 #Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 #Javascript
IDEA安装vue插件图文详解
Sep 26 #Javascript
You might like
多php服务器实现多session并发运行
2006/10/09 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
Python自动扫雷实现方法
2015/07/25 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python实现八大排序算法
2016/08/13 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
zooplus波兰:在线宠物店
2019/07/21 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
春节慰问简报
2015/07/21 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android