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
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。