vue项目使用elementUI中Tabs标签页点击切换tab-click发起网络请求数据

简述

标签页请求,切换进去会请求该页的数据
如果页面一加载就请求出所有的数据,会造成数据堵塞,对性能有很大的影响
所以要在tabs标签页点击切换 的时候发起相应的网络请求,用到的是tab-click事件。

示例图

需求

1.渲染出页面时默认显示第一页
2.切换tab时,加载此页数据

示例
<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first' //默认显示第一页
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>
说明

tab-click标签事件:tab 被选中时触发,他的返回值是被选中的标签 tab 实例
tab 和 event两个参数打印一下显示如下:

tab 的参数里有个 index 值,可以作为标签页切换的索引
tab 的参数里有个label,也可以作为切换标签的判断条件
也可以使用activeName。

实例

通过上述明确事件,参数后,修改如下进行实例操作

 // tabs标签页切换事件
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index == 0) {
        //网络请求1      
      } else if (tab.index == 1) {
        //网络请求2    
      } else {
       //网络请求3
      }
    }

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementui标签切换过渡动画可以使用Vue的transition组件来实现。具体步骤如下: 1. 在el-tabs标签添加name属性,用于指定transition组件的name值。 2. 在el-tabs标签添加v-model属性,用于绑定当前选标签。 3. 在el-tabs标签添加@tab-click事件,用于在标签切换时触发动画效果。 4. 在el-tabs-pane标签添加name属性,用于指定当前标签的name值。 5. 在el-tabs-pane标签添加v-if属性,用于控制当前标签的显示与隐藏。 6. 在el-tabs-pane标签添加transition组件,用于实现过渡动画效果。 以下是一个示例代码: ```html <template> <el-tabs v-model="activeName" name="tab-demo" @tab-click="handleTabClick"> <el-tab-pane label="标签1" name="tab1"> <transition name="tab-fade"> <div v-if="activeName === 'tab1'"> <!-- 标签1的内容 --> </div> </transition> </el-tab-pane> <el-tab-pane label="标签2" name="tab2"> <transition name="tab-fade"> <div v-if="activeName === 'tab2'"> <!-- 标签2的内容 --> </div> </transition> </el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeName: 'tab1' } }, methods: { handleTabClick(tab) { // 标签切换时触发 } } } </script> <style> .tab-fade-enter-active, .tab-fade-leave-active { transition: opacity 0.5s; } .tab-fade-enter, .tab-fade-leave-to { opacity: 0; } </style> ``` 在上面的代码,我们使用Vue的transition组件来实现标签切换的过渡动画效果。其,我们通过给el-tabs标签添加name属性来指定transition组件的name值,通过给el-tabs-pane标签添加name属性来指定当前标签的name值,通过给el-tabs-pane标签添加v-if属性来控制当前标签的显示与隐藏。同时,我们还通过在style标签添加CSS样式来定义了过渡动画的效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值