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

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 是点击事件的名称，有两个参数，tab 和 event对两个参数打印一下，得出下面的结果
  
  其中 tab 的参数里有个 index 值，可以作为标签页切换的索引，所以可以在这里加判断，然后进行网络请求
  

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

ok，完成