1. Elementui tabs组件内添加组件

1.1. 需求

  1. 今天的一个需求是在后台框架的基础上添加tab页,结果页面如下

  2. 原本上述红框内的内容是不存在的,直接点击左侧菜单栏进行页面跳转,现加了tab标签栏,实现快速的跳转

1.2. 实现

  1. 具体要根据自己的route实现类进行筛选,核心vue如下
<template>
<div>
<el-tabs v-model="TabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane style="border-radius: 3px" v-for="(item, index) in Tabs" :key="item.name" :label="item.title" :name="item.name">
<tab-component style="border-radius: 3px;margin: -15px 10px 0px 10px;" :index="index" :name="index"></tab-component>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name: 'TabBar',
data(){
return {
uniqueOpened: true,
TabsValue: '',
Tabs: [],
index:0,
tabComponent:{}
}
},
methods: {
addOneTab(menu) {
var exist = false;
for (var i = 0; i < this.Tabs.length; i++) {
if (menu.name === this.Tabs[i].name) {
exist = true;
break
}
}
if (exist === true) {
this.TabsValue = menu.name;
return
}
this.Tabs.push({
title: menu.name,
name: menu.name,
content: menu.component
});
var _this = this;
this.tabComponent = Vue.component('tab-component', {
render: function (h) {
var comp = _this.Tabs[this.index].content;
return h(comp)
},
props: {
index: {
type: Number,
required: true
}
}
});
this.TabsValue = menu.name
},
addTab(e) {
let first = "/"+e.split("/")[1];
let two = e.split("/")[2];
let tempRoutes = this.$router.options.routes;
for (let i = 0; i < tempRoutes.length; i++) {
let temp = tempRoutes[i];
if (temp.path === first) {
for (let j = 0; j < temp.children.length; j++) {
let child = temp.children[j];
if (child.path === two) {
let menu = {};
menu.name = child.meta.title;
menu.component = child.component;
this.addOneTab(menu);
}
}
}
}
},
removeTab(targetName) {
let tabs = this.Tabs;
let activeName = this.TabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.TabsValue = activeName;
this.Tabs = tabs.filter(tab => tab.name !== targetName);
}
}
}
</script>
  1. 上述是tab的实现,再就是菜单选择调用tab的addTab方法
<el-menu @select="addTab" mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse"
background-color="#304156" text-color="#fff" active-text-color="#409EFF">
<sidebar-item :routes="routes"></sidebar-item>
</el-menu> addTab(e) {
this.$refs.tabBar.addTab(e);
}
  1. 上面代码会看着有点奇怪,因为SideBar,也就是上述的el-menu所在组件和tab是平级的,如下
<template>
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
<sidebar ref="sidebar" @addTab="addTab" class="sidebar-container"></sidebar>
<div class="main-container">
<navbar></navbar>
<tab-bar ref="tabBar"></tab-bar>
<app-main></app-main>
</div>
</div>
</template>

siderBartab-bar在同一个组件内,所以要实现参数传递,需要先emit提交事件,再在父组件传递给另一个子组件,这样链路就完整了,没看懂我的看下面的参考吧,我也是参考它的结合自己的代码实现

1.3. 参考

  1. 参考自该问答陶通的回答

Elementui tabs组件内添加组件的更多相关文章

  1. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

  2. 【HarmonyOS】【Demo】【JAVA UI】 鸿蒙怎么在Webview上添加组件

    在大家HarmonyOS开发中,Webview组件上添加组件可能是很常见的功能了,HarmonyOS的webview和Android的webwiew存在一点点区别,今天来实现这个功能 使用项目布局显示 ...

  3. Vue_子级组件调用主组件函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. element-ui 的el-button组件中添加自定义颜色和图标的实现方法

    这篇文章主要介绍了element-ui 的el-button组件中添加自定义颜色和图标的实现方法,目前的解决方案是:添加一个自定义全局指令,同时在element-ui源码中,加入对应的组件.需要的朋友 ...

  5. Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

    1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...

  6. form-create教程:给内置组件和自定义组件添加事件

    本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...

  7. 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题

    最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...

  8. Vue内置组件[回顾]

    1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...

  9. vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新

    问题描述 父组件切换行,然后子组件切换tab,子组件内的数据不刷新. 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织. 当tab显示商品页时,切换订单,商品页内容跟着 ...

随机推荐

  1. android开发里跳过的坑——图片文件上传失败

    使用的apache的httpclient的jar包,做的http图片上传,上传时,服务器总返文件格式不对.后来发现,是由于在创建FileBody时,使用了默认的ContentType引起的.所以服务器 ...

  2. POJ 1182_食物链

    题意: 三种动物A,B,C,A吃B,B吃C,C吃A, 有人用两种说法对这N个动物所构成的食物链关系进行描述: 第一种说法是"1 X Y",表示X和Y是同类. 第二种说法是" ...

  3. poj——1422 Air Raid

    Air Raid Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8577   Accepted: 5127 Descript ...

  4. 洛谷—— P2543 [AHOI2004]奇怪的字符串

    P2543 [AHOI2004]奇怪的字符串 题目描述 输入输出格式 输入格式: 输入文件中包含两个字符串X和Y.当中两字符串非0即1.序列长度均小于9999. 输出格式: X和Y的最长公共子序列长度 ...

  5. Ubuntu 16.04安装RapidSVN

    使用RabbitVCS有一些不完美,比如没有把文件增加到版本库的功能,导致无法提交等问题,现在再次安装RapidSVN来弥补这些缺点. 安装: sudo apt-get install rapidsv ...

  6. JDBC的异常

    以下内容引用自http://wiki.jikexueyuan.com/project/jdbc/exceptions.html: 异常处理可以允许处理一个异常情况,例如可控方式的程序定义错误. 当异常 ...

  7. Kettle循环删除数据

    1.问题描述: 某个系统原库的数据同步到备份库.但是由于原库的的数据会物理删除,此时需要删除备份库的数据. 2.不理想的解决1: 1)首先从备份库获取该表的所有ID: 2)循环备份库的ID,去原库检测 ...

  8. NetworkManager的坑(如何让network manager不去管理网络端口)

    在CentOS上,有时你需要停止并禁用 NetworkManager.但这样做了之后,其实NetworkManager还在影响着你的端口. 比如你有端口配置如下: [root@compute02 ~] ...

  9. 原则 principles

    1.找到对的人来讨论问题. 2.把工作分配给对的人才能把事情做对. 3.

  10. zabbix学习系列之QQ消息报警

    安装依赖包 环境 Zabbix: 3.2 OS:Centos 安装依赖包 yum install lrzsz chrony gcc gcc-c++ git openssl-devel perl-Ext ...