elemntui-tab添加图标
<el-tabs :before-leave="moreState" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
<el-tab-pane name="more" class="more-btn">
<div slot="label">
<i class="iconfont icon-input"></i>
<i class="iconfont icon-enable"></i>
<i class="iconfont icon-lock"></i>
</div>
</el-tab-pane>
</el-tabs>
activeName: 'second'
methods: {
post(mess) {
console.log(mess);
},
handleClick(tab, event) {
console.log(tab, event);
if (this.activeName == "second") {
} else if (this.activeName == "third") {
} else if (this.activeName == "fourth") {
}
},
moreState(tab, event) {
if (tab == 'more') {
console.log("/////", tab, event);
return false;
}
}
},
<style lang="scss" scoped>
/deep/ #tab-more {
width: calc(100% - 200px);
text-align: right;
}
/deep/ .el-tabs__nav {
width: calc(100% - 200px);
}
</style>

tab的最右边 通常有一些按钮。
这些按钮就是做一操作。
我们可以利用钩子函数 来做的moreState
elemntui-tab添加图标的更多相关文章
- 在Linux(Luna)下向Launch启动器中添加图标
记录下在Luna下向Launch中添加图标的步骤,以供以后参考,这里我以加入eclipse图标为例: 首先,我们来创建一个desktop文件(Luna中到启动器Launch可以看作是Ubuntu中到桌 ...
- 通过easyui tab添加的子页面JS脚本必须放在body才生效
通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码
- 为网站文字前面添加图标 在线调用 Font Awesome 字体icon小图标 美化网站
一.如何开始 1.将下面的代码复制粘贴到HTML页面面的 <head> 下面 <link rel="stylesheet" href="https:// ...
- Qt 程序和窗口添加图标
Qt项目在打包发布之后都需要有个个性的程序图标和窗口图标,这样会使程序更加美观大方,下面我们分别来看如何给程序和窗口分别添加图标.我们需要两种格式的图片,一种是.ico的,用来给程序添加图标,一种是. ...
- iOS中为网站添加图标到主屏幕以及增加启动画面
虽然没有能力开发Native App,但还是可以利用iOS中Safari浏览器的特性小小的折腾一下,做一个伪Web App满足下小小的虚荣心的. 既然是在iOS中的Safari折腾的,那么代码中利用到 ...
- ExtJS 添加图标icon
extjs控件有两个属性:一个是iconCls:另一个是icon.通过这两个属性可以对控件添加图标 1.直接引用图标路径 icon: '../icons/application_view_detail ...
- Extended ComboBox添加图标
Extended ComboBox添加图标 关键点 实现过程 // MFC02Dlg.h : header fileCImageList m_imageList; // MFC02Dlg.cpp : ...
- Delph控制台(Console)程序添加图标和版权信息
Delphi创建控制台(Console)程序默认是无法添加图标和版权的.经过仔细的对比窗体程序与控制台程序源码,发现窗体程序的工程文中,在uses结束begin开始的地方有一句如下代码:{$R *.r ...
- weex 学习: 添加图标(使用阿里吧吧-icon)
添加图标(使用阿里吧吧-icon) <text slot="left" class="header-left"></text> i ...
- _ZNote_Qt_添加图标方法
简单来说就两步: 将icns图标添加入资源文件,例如picture.icns .pro文件中添加 (图标) ICON = picture.icns 程序中添加(程序窗口上显示) setWindowIc ...
随机推荐
- 云小课 | DSC之数据水印,防止数据被盗用
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 华为云数据安全中 ...
- 再谈BOM和DOM(7):HTML DOM Event 对象属性及DOM事件详细列表
之前写<再谈BOM和DOM(4):HTML DOM Event 对象>时候,对event对象及各种dom事件没有详细道来,这里些表格.备查. Event 对象 Event 对象代表事件的状 ...
- 字节跳动开源数据集成引擎 BitSail 的演进历程与能力解析
导读 BitSail 是字节跳动开源数据集成引擎,支持多种异构数据源间的数据同步,并提供离线.实时.全量.增量场景下全域数据集成解决方案,目前支撑了字节内部和火山引擎多个客户的数据集成需求.经过字节跳 ...
- 火山引擎 DataTester :让字节“跳动”起来的 A/B 实验平台
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流 火山引擎 DataTester 不仅对外提供服务,同时也是当前字节跳动内部所应用的 AB 实验平台. DataTes ...
- Solon 的多配置文件切换
比如有配置文件: app.yml app-dev.yml app-pro.yml 可以通过启动参数:-env java -jar demoapp.jar -env=dev
- MySQL java new dat() 后插入数据库的时间不一致
别用时间字段,做为关联字段,代码里的时间和插到数据库中有误差 MySQL java new dat() 后插入数据库的时间不一致,代码里new 的时间插到数据库中不一致
- Python中节省内存的方法之二:弱引用weakref
弱引用和引用计数息息相关,在介绍弱引用之前首先简单介绍一下引用计数. 引用计数 Python语言有垃圾自动回收机制,所谓垃圾就是没有被引用的对象.垃圾回收主要使用引用计数来标记清除. 引用计数:pyt ...
- Codeforces Round #658 (Div. 2)
A.Common Subsequence 题意 给你两组数,问你有没有相同 的书,有的话,输出最短的那组(大家都知道,1是最小的) AC #include<bits/stdc++.h> ...
- 你以为这是MacOS ,其实这是我的 Linux 系统 Manjaro!
对于如何将你的 Manjaro 系统美化成 MacOS 你需要做以下几件事情: 1.安装 WhiteSur-Gtk-theme 主题. 2.安装 Plank 软件. 3.安装 vala-panel-a ...
- vue-echarts之折线图以及双Y轴折线,柱状混合图,部分属性记录
https://blog.csdn.net/qq_41139348/article/details/106870005 https://segmentfault.com/a/1190000021898 ...