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 ...
随机推荐
- 为提高 SDLC 安全,GitHub 发布新功能|GitHub Universe 2022
GitHub Universe 2022于上周举办.在此次大会上,Github 公布了开源软件状态的最新报告,报告中的统计数据显示,90% 的公司都在使用开源,现在 GitHub 上有9400万用户, ...
- 音乐 APP 用户争夺战,火山引擎 VeDI 助力用户体验升级!
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 国内数字音乐市场正在保持稳定增长. 根据华经产业研究院数据报告显示,2020 年数字音乐市场规模为 357.3 亿元,到 ...
- 带你全方面了解字节 A/B 实验的文化与工具
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 A/B 测试是在相同的环境下,通过随机的抽样把对照组和控制组进行区分,并分别实行新旧两种策略,结合一定的统计方法来 ...
- Google Guava ListeningExecutorService
POM <!-- https://mvnrepository.com/artifact/com.google.guava/guava --> <dependency> < ...
- Hugging News #0203: 3.3 MB 的文生图模型、RHLF 训练框架、手机上能跑的 Transformer
每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...
- ChatGpt windows+mac os+linux三平台桌面版下载
1 前言 ChatGPT这段时间还是挺火的,有不了解的小伙伴可以看看这篇ChatGPT为何打响AI新时代的礼炮,一路火花带闪电[1],能简单的了解: 什么是ChatGPT ChatGPT为什么这么火 ...
- POJ:Arbitrage (搜索,汇率换算是否赚?)
POJ 2240 http://poj.org/problem?id=2240 题意:判断是否存在使得汇率增多的环 [任意一个点的汇率增多都可以] Floyd 简单变形 \(w[i][j] = max ...
- Codeforces Round #728 (Div. 2) A~C 补题记录
比赛链接:Here 1541A. Pretty Permutations 给定 \(1,2,3,4,...n\) 序列,让每一个数字都不处于原来的位置,但总的移动距离要最小 \(n\) 为偶数的情况 ...
- 「HDU-2196」Computer (树形DP、树的直径)
「HDU-2196」Computer 树形dp,树的最长路径(最远点对) 题意 给出一棵nn个结点的无根树,求出每个结点所能到达的最远点的距离. 解法 将无根树转成有根树,并进行两次DFS. 第一次D ...
- VIM 入门手册, (VS Code)
要想在VScode里使用Vim需要先行按照插件 安装 vim 插件 VS Code 中输入快捷键 shift + ctrl + x, 或直接打开 扩展安装导航 搜索 vim, 选择 Vim , 点击 ...