element-ui tab标签禁止切换

Tab禁止切换

  • 给el-tabs标签设置style=“pointer-events: none;”\
  • 注意:每个el-tab-pane标签也要加上style="pointer-events: auto;"否则各个页面的所有鼠标事件都会失效
    <el-tabs v-model="activeName" style="pointer-events: none;">
	    <el-tab-pane label="用户管理" name="first" style="pointer-events: auto;">用户管理</el-tab-pane>
	    <el-tab-pane label="系统管理" name="second" style="pointer-events: auto;">配置管理</el-tab-pane>
	    <el-tab-pane label="角色管理" name="third" style="pointer-events: auto;">角色管理</el-tab-pane> 
  </el-tabs>

tab跳转指定标签页

  • HTML
<el-tabs  v-model="activeName"  tabPane="tabPane">
activeName: "first", // 定义数据,默认展示第一个
  • JS
    tabPane() {
     if (xxx === "y") {
       this.activeName = "second"; 
     } else (xxxx === "y") {
       this.activeName = "third"; 
     }  
   },
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
是的,element-ui提供了Tab组件来实现Tab切换。你可以自定义Tab的样式,并且可以在每个Tab下面添加不同的内容。 以下是一个简单的例子,展示了如何在element-ui中实现Tab切换。 ```html <template> <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="Tab 1" name="tab1"> <p>This is Tab 1 content.</p> </el-tab-pane> <el-tab-pane label="Tab 2" name="tab2"> <p>This is Tab 2 content.</p> </el-tab-pane> <el-tab-pane label="Tab 3" name="tab3"> <p>This is Tab 3 content.</p> </el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeName: 'tab1' } }, methods: { handleClick(tab, event) { console.log(tab, event); } } } </script> <style scoped> /* 自定义样式 */ .el-tabs__header { background-color: #f0f0f0; } .el-tabs__item { color: #666; } .el-tabs__active-bar { height: 3px; background-color: #409EFF; } </style> ``` 在上面的示例中,我们使用`<el-tabs>`来创建Tab组件,`v-model`指令绑定了当前选中的Tab的`name`属性,`@tab-click`监听Tab的点击事件。 在每个`<el-tab-pane>`中,我们可以添加不同的内容,并且可以使用`label`属性来设置Tab的名称,`name`属性来设置唯一标识符。 最后,我们在`<style>`中定义了一些自定义样式,例如修改Tab头部的背景色、Tab项的文字颜色以及激活状态下的下划线颜色。 你可以根据自己的需求,进一步修改样式以及添加更多的Tab项和内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值