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 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php类的定义与继承用法实例
2015/07/07 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
Javascript继承机制的设计思想分享
2011/08/28 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
python学习数据结构实例代码
2015/05/11 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
老生常谈Python基础之字符编码
2017/06/14 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
法务专员岗位职责
2014/01/02 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
公安学专业求职信
2014/07/27 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
公司开除员工通知
2015/04/22 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Redis高并发缓存架构性能优化
2022/05/15 Redis
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python