Element Ui中el-tabs下的el-tab-pane调整label大小

最新推荐文章于 2024-11-25 10:19:23 发布

我会暴富_

最新推荐文章于 2024-11-25 10:19:23 发布

阅读量1.1w

点赞数 3

本文链接：https://blog.youkuaiyun.com/m0_60200582/article/details/119696186

版权

这篇博客展示了如何在Vue.js中利用`<el-tabs>`组件创建用户管理和配置管理的Tab面板，并通过`v-model`和`@tab-click`实现面板切换。同时，对`.monitorTop`类进行了样式调整，使用`calc()`函数计算高度以适应视口，并修改了`el-tabs__item`的字体大小，以提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《template》代码

  <div class="monitorTop">
 <el-tabs 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-tabs>
</div>

《data代码》

 export default {
    data() {
      return {
        activeName: 'second'
      };
    },

《methods代码》

  handleClick(tab, event) {
        console.log(tab, event);
      }

《style代码》

在全局里边设置样式

.monitorTop {
    /*// position: relative;  相对定位,*/
    position: relative;
    /*vw是width of view(port)的缩写；
  100vw表示百分之百的视图宽度；
  123px是需要减去的宽度；
  减号的两边必须都有至少一个空格*/
    height: calc(100% - 123px);
  }

 .monitorTop .el-tabs__item {
    font-size: 17px !important;

  }

浏览器查看el-tab-pane他的class是el-tabs_item