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 ...
随机推荐
- hadoop清空回收站命令
直接删除目录(不放入回收站) hdfs dfs -rm -skipTrash /tmp/aaa 清空回收站 hdfs dfs -expunge 执行完命令后,回收站的数据会在一分钟后清除.
- C# WPF 将第三方DLL嵌入 exe
没成功,只是做个记录,后面再研究 希望将第三方的 HandyControl.dll 嵌入到 exe 中,这样不用发多个文件给别人 将第三方DLL.加载到解决方案中 添加引用 将"属性页&qu ...
- SpringBoot 配置 Swagger
Profile Config 多环境不同配置 1.添加 Pom 文件 <dependency> <groupId>io.springfox</groupId> &l ...
- Java Sprintboot jar 项目启动、停止脚本
将 vipsoft-gateway-1.0.0 替换成自己的包名 start-gateway-dev.sh nohup java -Duser.timezone=GMT+08 -Dfile.encod ...
- python中的代码运行时间获取方式
python中的代码运行时间获取方式 我们知道为了提高代码的运行速度,我们需要对书写的python代码进行性能测试,而代码性能的高低的直接反馈就是电脑运行代码所需要的时间. 使用time模块对代码 ...
- sqlalchemy 报错 Lost connection to MySQL server during query 解决
最近在开发过程中遇到一个sqlalchemy lost connection的报错,记录解决方法. 报错信息 python后端开发,使用的框架是Fastapi + sqlalchemy.在一个接口请求 ...
- 【论文笔记#1】SPGAN-DA:用于领域自适应遥感图像语义分割的语义保留生成对抗网络
作者: Yansheng Li 发表年代: 2023 使用的方法: 无监督领域自适应(UDA).GAN.ClassMix.边界增强 来源: IEEE TGRS 方向: 语义分割 期刊层次: CCF B ...
- Prometheus--PromQL
官方文档:https://prometheus.io/docs/introduction/overview/ 中文文档:https://prometheus.fuckcloudnative.io/ ...
- Java异步编程详解
在现代应用程序开发中,异步编程变得越来越重要,特别是在处理I/O密集型任务时.Java提供了一套强大的异步编程工具,使得开发者能够更有效地处理并发任务.本篇博文将深入探讨Java中异步编程的方方面面, ...
- 【驱动】SPI驱动分析(七)-SPI驱动常用调试方法
用户态 用户应用层使用spidev驱动的步骤如下: 打开SPI设备文件:用户可以通过打开/dev/spidevX.Y文件来访问SPI设备,其中X是SPI控制器的编号,Y是SPI设备的编号. 配置SPI ...