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

element-ui Tabs本身是没有更多功能的，如果在外边添加一个更多按钮，又非常不好看，

而利用API中Tabs Attributes的before-leave勾子方法可以实现这个功能，

简单PO出代码

<template><el-card class="box-card"><el-tabs :before-leave="moreState"><el-tab-pane label="最新">最新</el-tab-pane><el-tab-pane label="新闻">新闻</el-tab-pane><el-tab-pane label="公告">公告</el-tab-pane><el-tab-pane label="活动">活动</el-tab-pane><el-tab-pane name="more" class="more-btn"><span slot="label"><router-link to="/page/wholeList/wholeList">更多+</router-link></span></el-tab-pane></el-tabs></el-card>
</template><script>export default {name: "HomeNewsList",date(){return{// moreState:false,
          }},methods:{moreState(tab, event){if(tab == 'more'){console.log("/",tab, event );return false;}}}}
</script><style scoped>
.box-card{width: 600px;
}
.box-card .el-tabs__item.is-top:last-child{color: #ff4949;
}</style>

转载于:https://www.cnblogs.com/zhixi/p/10021708.html

vue element-ui Tabs 标签页实现【更多】功能相关推荐

vue + element 中tab标签页拖拽(拖动) sortablejs插件实现
tab签拖拽更换位置业务需求效果图 1.npm安装sortable.js 2.html代码块 3. 在script下导入 4.js逻辑片段(**const el 必须找到自己拖拽的那一列** ) ...
vue实现nav tabs标签页切换
1.页面组件tagsView.vue.scrollPane.vue <template><div class="tags-view-container">& ...
vue element ui跳转页获取跳转前页面列表里的行id
后台管理系统经常要用到列表,在列表的每一行经常需要做编辑操作,自己做项目的时候,编辑页用了一个新的隐藏页,通过路由加载,隐藏页需要获取前一页当前行的id,可以在跳转时携带一个行参数id,通过this. ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...

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

vue element-ui Tabs 标签页实现【更多】功能相关推荐

最新文章

热门文章