// 此处是把tabs的边距清空::v-deep .el-tabs__item {padding:0; }.custom-tabs::v-deep .el-tabs__active-bar {width:21px!important;// 假如设置下划线固定21pxmargin-left: calc((100%/3-21px) /2);// 3为tabs的数量background-color: red;height:4px;border-radius:4px; } 3.效果图...
(以下以纵向tabs为例,tab的高度为36px, 边框为1px, 下边距为10px) 解决方法: 修改点击tab时下划线滑动的transfrom属性 即: handleTabClick (tab) { this.$nextTick(() => { let ele = document.getElementsByClassName('el-tabs__active-bar')[0] let distance = tab.index == 0 ? 0 : tab.index ...
/*去下划线 */::v-deep .el-tabs__nav-wrap::after {position: static !important;}/* 下划线颜色 */::v-deep .el-tabs__active-bar {background-color: red;} 完整代码 <template><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="User" name="first">User</el-...
</el-tabs> 1. 2. 3. 2.css样式中这样写: // 此处是把tabs的边距清空 ::v-deep .el-tabs__item { padding: 0; } .custom-tabs ::v-deep .el-tabs__active-bar { width: 21px!important; // 假如设置下划线固定21px margin-left: calc((100% / 3 - 21px) / 2); // 3为tabs的数...
</el-tabs> 1. 2. 3. 2.css样式中这样写: // 此处是把tabs的边距清空 ::v-deep .el-tabs__item { padding: 0; } .custom-tabs ::v-deep .el-tabs__active-bar { width: 21px!important; // 假如设置下划线固定21px margin-left: calc((100% / 3 - 21px) / 2); // 3为tabs的数...
默认情况下,el-tabs下划线长度根据标签内容自动调整。那么如何自定义e-tabs的样式呢? 1.el-tabs标签设置自定义class名 <el-tabsv-model=""class='custom-tabs'><el-tab-panev-for="(item, index) in list":key="index":label="item.value"></el-tab-pane></el-tabs> ...