vue+elementui实现选项卡功能 vue+elementui实现选项卡功能

本文实例为大家分享了vue+elementui实现选项卡功的具体代码，供大家参考，具体内容如下
用法：首先自己先在项目中定义三个组件（顶部TopNav，左侧LeftAside，中间Main），这方法三两句话描述不清
我就上我用过的一个项目代码实例（但是这个有点缺陷，没有做像一键清空选项卡，关闭左右侧选项卡的方法）
TopNav

.el-menu-vertical-demo:not(.el-menu--collapse) {border: none; } .submenu {float: right; } .buttonimg {height: 60px; background-color: transparent; border: none; } .showimg {width: 26px; height: 26px; position: absolute; top: 17px; left: 17px; } .showimg:active {border: none; }

LeftAside

Main

.main-container {height: 100%; width: 100%; box-sizing: border-box; } .main-aside-collapsed {/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */width: 64px !important; height: 100%; background-color: #334157; margin: 0px; } .main-aside {width: 240px !important; height: 100%; background-color: #334157; margin: 0px; } .main-header,.main-center {padding: 0px; border-left: 2px solid #333; height: 100%; object-fit: fill; } .div-pagination {margin: 10px 0px; width: 100%; } /* 设置tabs内容面板100%填充父容器 */.tabs-panel-fit {margin: 0; padding: 0; /* background-color:#1F2D3D; */width: 100%; height: 100%; object-fit: fill; } /* 设置tabs内容面板的内边距为0 */.el-tabs--border-card>.el-tabs__content {padding: 0; } /* 设置tab的表框效果（重要） */.el-tabs.el-tabs--border-card {box-shadow: none; border-bottom: none; border: 0; } /*设置选项卡中第一个首页选项卡不能关闭*/.el-tabs>.el-tabs__header .el-tabs__item:first-child>span {display: none; } /* elementUI dialog弹出框样式优化 */.el-dialog {position: absolute; top: 50%; left: 50%; margin: 0 !important; transform: translate(-50%, -50%); max-height: calc(100% - 30px); max-width: calc(100% - 30px); display: flex; flex-direction: column; /* 圆角效果 */border-radius: 0.4em; } .el-dialog>.el-dialog__body {overflow: auto; } .el-dialog__header {background-color: #F5F7FA; border-bottom: 1px solid #ccc; font-size: 14px; font-weight: bold; padding: 15px 20px 15px; /* 圆角效果 */border-radius: 0.4em 0.4em 0em 0em; } .el-dialog__body {padding: 20px 15px; } .el-dialog__footer {background-color: #F5F7FA; border-top: 1px solid #ccc; padding: 15px; /* 圆角效果 */border-radius: 0em 0em 0.4em 0.4em; } .el-form>.el-form-item:last-child {margin-bottom: 0px; } /* 更改table表格的高亮背景色*//* .el-table tr.current-row>td {background: #FFF68F; } */.el-table .el-table__body tr:hover>td{background: #FFF68F; font-weight:bold; color:#000000; } /* 分页组件 *//* .div-pagination {margin: 10px 0px; width: 100%; } */

【vue+elementui实现选项卡功能】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。