vue 切换tab标签调用不同的方法渲染数据

html 

<el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane v-for="item in tabConfig" :key="item.name" :label="item.label" :name="item.name">
    ```这里是需要渲染数据的组件，可根据需要自定义
    </el-tab-pane>
</el-tabs>

js

data(){
    return {
        loading: false,
        activeName: 'AuthApp',
        tabConfig: [
            {
              label: '权限应用',
              name: 'AuthApp'
            },
            {
              label: '组件',
              name: 'Component'
            },
            {
              label: '商店应用',
              name: 'PackageApp'
            }
         ],
         tableData: []
    }
}
methods:{
    // 获取权限应用数据
    async getAuthAppList(){
      this.loading = true;
      try{
        const res = await this.$api.management.appDataList();
        this.tableData = res.data;
        this.loading = false;
      }catch(err){
        console.log(err)
        this.loading = false;
      }
    },
    // 获取组件数据
    async getComponentDataList(){
      this.loading = true;
      try{
        const res = await this.$api.management.componentDataList();
        this.tableData = res.data;
        this.loading = false;
      }catch(err){
        console.log(err)
        this.loading = false;
      }
    },
    // 获取商店应用数据
    async getPackageAppDataList(){
      this.loading = true;
      try{
        const res = await this.$api.management.appStoreDataList();
        this.tableData = res.data;
        this.loading = false;
      }catch(err){
        console.log(err)
        this.loading = false;
      }
    },
    handleTabClick(){
      this[`get${this.activeName}DataList`]();
    },
}