element ui Tabs 居中

在这里插入图片描述
设置stretch

<el-tabs v-model="activeName" @tab-click="handleClick" stretch>
    <el-tab-pane label="学院管理" name="first"></el-tab-pane>
</el-tabs>

::v-deep .el-tabs__nav-scroll{
  width: 50%!important;
  margin: 0 auto!important;
}
  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue3和ElementPlus是一组流行的JavaScript库,使用它们可以方便地开发Web应用,尤其是基于组件的应用。而Tabs是一种常用的UI组件,可以让用户在不同的选项卡之间切换并显示不同的内容。在Vue3和ElementPlus中,实现Tabs切换也是非常容易的。 首先,需要在Vue3和ElementPlus中引入相应的组件,并且在页面中定义Tabs的参数和选项卡的内容。例如: ``` <template> <div> <el-tabs v-model="activeTab" @tab-click="handleTabClick"> <el-tab-pane label="选项卡一">选项卡一的内容</el-tab-pane> <el-tab-pane label="选项卡二">选项卡二的内容</el-tab-pane> <el-tab-pane label="选项卡三">选项卡三的内容</el-tab-pane> </el-tabs> </div> </template> <script> import { ElTabs, ElTabPane } from 'element-plus'; import { ref } from 'vue'; export default { components: { ElTabs, ElTabPane, }, setup() { const activeTab = ref('选项卡一'); const handleTabClick = (tab) => { console.log('点击了', tab.name); }; return { activeTab, handleTabClick, }; }, }; </script> ``` 在上面的代码中,定义了一个包含三个选项卡的Tabs组件,每个选项卡都有一个label和对应的内容。activeTab是用来保存当前选中的选项卡的名称,handleTabClick是用来处理切换选项卡时触发的事件。在代码中打印了点击的选项卡的名称,以便验证切换是否成功。 为了在页面中显示Tabs组件,需要在App.vue中引入这个组件并显示出来: ``` <template> <div id="app"> <Navigation /> <router-view /> <Tabs /> </div> </template> <script> import Tabs from './components/Tabs.vue'; import Navigation from './components/Navigation.vue'; export default { components: { Tabs, Navigation, }, }; </script> ``` 在上面的代码中,引入了Tabs组件并显示出来。同时还引入了另一个自定义组件Navigation来作为页面的导航栏,router-view用来显示页面内容。这里可以根据实际需要调整组件的引入和显示方式。 最后,在页面中点击Tabs的选项卡,就可以看到控制台输出了选项卡的名称,证明切换选项卡已经成功了。这样,就可以轻松实现Vue3和ElementPlus中的Tabs切换功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值