vue项目中elementUI中tabs标签页点击切换 发起网络请求 tab-click

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

官网中的tabs标签页效果:
在这里插入图片描述
示例代码:

<template>
  <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-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: 'second'   
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>
  • data 里的 activeName 代表默认显示的第几个tab页
  • tab-click标签事件:tab 被选中时触发,他的返回值是被选中的标签 tab 实例
    在这里插入图片描述
  • handleClick 是点击事件的名称,有两个参数,tabevent对两个参数打印一下,得出下面的结果
    在这里插入图片描述
    其中 tab 的参数里有个 index 值,可以作为标签页切换的索引,所以可以在这里加判断,然后进行网络请求
    在这里插入图片描述
 // tabs标签页切换事件
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index == 1) {
        //网络请求1      
      } else if (tab.index == 2) {
        //网络请求2    
      } else {
       //网络请求3
      }
    }

ok,完成

Logo

前往低代码交流专区

更多推荐