1、效果如下:

实现代码如下:
<el-tab-pane name="first">
<span slot="label">
<span class="span-box">
<span>预警</span>
<el-tooltip
class="item"
effect="dark"
content="2"
placement="bottom-start"
>
<span class="btn-bell-badge">
<span class="num">2</span>
</span>
</el-tooltip>
</span>
</span>
</el-tab-pane>

<style lang="stylus" scoped>
.span-box {
display: flex;
justify-content: flex-start;
align-items: center;
.btn-bell-badge {
width: 26px;
height: 18px;
margin-left 5px;
line-height 18px
border-radius: 15px;
background: #f56c6c;
.num {
display: block;
width: 100%;
text-align: center;
font-size: 12px;
color: #fff;
}
}
}
</style>

elementUI中如何在Tabs标签页的标题文字后面添加文字或图标的更多相关文章

  1. 踩iviewui中Tabs 标签页数据绑定坑

    今天小颖要实现点击Tabs 标签页中每个标签,并动态获取当前点击的标签值. 一句话说不清楚,那就看动态图吧 小颖一开始看官网写的代码是: <template> <Tabs :valu ...

  2. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  3. tabs标签页的数据缓存

    一进入tabs标签页默认就将所有标签页的数据请求到,并渲染到页面上, 这样如果数据量太大的话会渲染很久, 我的需求就是点击不同的标签时再请求数据,同时对点击过的标签页数据进行缓存,下次点击时不再重新请 ...

  4. easyui,获取tabs标签页内容,以及刷新datagrid

    因为先点开tab页xxx查看表格,再点另一个tab页xxxx修改部分信息,再切换到tab页xxx,tab页xxx里的datagrid表格不会刷新,显示不了修改的信息(在此tab页按F5刷新可以解决,但 ...

  5. (原创)【B4A】一步一步入门10:TabHost,标签页、标题带图标(控件篇06)

    一.前言 本篇教程我们来讲一下TabHost(标签页)的基本使用方法. 相信看完的你,一定会有所收获! 本文地址:https://www.cnblogs.com/lesliexin/p/1728556 ...

  6. 点击后退按钮回到本页面中的另一个标签页(tab)

    在使用zepto进行微信网页开发的时候,遇到一个情况,在本页面存在四个TAB栏,每点击一个栏会显示相应的内容,下图这种: 现在有一个需求是,用户点击了后退按钮,需要回到上一次点击的tab栏. 这个需求 ...

  7. 使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项

    导航栏到小屏幕的时候,我们的处理办法是隐藏为一个按钮.可是选项卡的标签页部分,我们的处理办法是加一个水平滚动条.但是加水平滚动条需要解决一个问题,就是宽度的问题,如果不设置宽度,他就会根据屏幕大小自适 ...

  8. vue element-ui Tabs 标签页实现【更多】功能

    element-ui Tabs本身是没有更多功能的,如果在外边添加一个更多按钮,又非常不好看, 而利用API中Tabs Attributes的before-leave勾子方法可以实现这个功能, 简单P ...

  9. rails中如何在a标签中添加其他标签

    最近在用rails写一个项目练练手,然后遇到了一个问题,就是用 <% link_to("首页", root_path) %> 生成一个a标签,之后就在想我怎么在这个a标 ...

  10. Tabs - 标签页

    <div class="J_TWidget tab" data-widget-type="Tabs"style="width:宽度px; hei ...

随机推荐

  1. uni-app生命周期小测

    标签: js uni-app 前情 uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app. ...

  2. idea配置gradle国内镜像源

    项目文件中找到build.gradle文件,修改其中的buildscript和allprojects地址: buildscript { repositories { maven{ url 'http: ...

  3. 【MyBatis】学习笔记07:模糊查询

    [Mybatis]学习笔记01:连接数据库,实现增删改 [Mybatis]学习笔记02:实现简单的查 [MyBatis]学习笔记03:配置文件进一步解读(非常重要) [MyBatis]学习笔记04:配 ...

  4. rpc-java 生成代码路径设置

    <plugin> <groupId>org.xolstice.maven.plugins</groupId> <artifactId>protobuf- ...

  5. Ubuntu终端输入异常、无法退格(删除文本)、使用方向键命令

    1 起因 为了学习嵌入式开发安装去安装的ncurses库,使用命令:sudo apt-get install libncurses5-dev导致系统自带的ncurses-base被自动删除. 2 出现 ...

  6. 关于在VMware中安装的CentOS7系统中无法安装ntp

    一.问题引言 今天在虚拟机中新安装了CentOS7,在使用yum命令时,出现如下如错误: 2.点击图片中链接,即是"2"中的红框,发现该链接竟不可达 3.于是开始找度娘,但并没有发 ...

  7. 龙哥量化:通达信分时均线在5分钟K线图上显示

    代写技术指标.量化策略,微信:Long622889 龙哥QQ:591438821 T1:=DAY<>REF(DAY,1);T2:=BARSLAST(T1)+1;JX:SUM(AMO,T2) ...

  8. 在Eclipse配置并编译worldwind java2.1.0源码,选中Src目录下gov.nasa.worldwindx.examples包下ApplicationTemplate.java类文件run时提示“javax.xml.parsers.DocumentBuilderFactory.setFeature(Ljava/lang/String;Z)V”异常的解决办法

    问题现象: 在Eclipse配置并编译worldwind java2.1.0源码,选中Src目录下gov.nasa.worldwindx.examples包下ApplicationTemplate.j ...

  9. 大型IM稳定性监测实践:手Q客户端性能防劣化系统的建设之路

    本文来自腾讯手Q基础架构团队杨萧玉.邱少雄.张自蹊.王褚重天.姚伟斌的分享,原题"QQ 客户端性能稳定性防劣化系统 Hodor 技术方案",下文进行了排版和内容优化. 1.引言 接 ...

  10. Transformer总结

    Contents Attention OverallSurvey NLP Language Speech CV Backbone_Classification Self-Supervised Inte ...