elementui中el-tabs切换时渲染数据，并且只有在首次切换时才会执行函数刷新数据

本文介绍: elementui中el–tabs 切换时渲染数据，并且只有在首次切换时才会执行函数刷新数据

问题 描述：

在使用 el–tabs时会将tabs中的所有请求一次性执行完毕，假设第二个页面的请求失败了，但是它会在激活的当前 tabs就将报错信息提示出来，当切换页面时，提示不再有，非常的不友好。期望在第一次切换时能够执行接口查询数据，再次点击时，不再调用。

实现 效果:

注意看当前激活的el–tabs，对应 tabs才调用请求（蓝色下划线）
在这里插入图片描述

在这里插入图片描述

解决方案：

&lt;el-tabs
     v-model="activeName"
      style="width: 100%"
      @tab-click="handleClick"
    &gt;
      <el-tab-pane label="日粮预估" name="first" class="tabs"&gt;
      <DietEstimate ref="dietEstimate" /&gt;
      </el-tab-pane&gt;
      <el-tab-pane label="日粮营养" name="second"
        &gt;<DietNutrition ref="dietNutrition" :AAA="AAA"/&gt;
      </el-tab-pane&gt;
=</el-tabs>

export default {
  data() {
    return {
    	activeName:'frist'
    };
  },
  mounted() {},
  methods: {
	  handleClick() {
	      if (this.activeName === 'second') { this.AAA = true; }
      },
 },
};


分割线
在DietEstimate页面  日粮预估
export default {
  data() {
    return {
    };
  },
  mounted() {
  	this.getList();
  },
  methods: {
  	getList() {
      let query = {
        ...this.baseform,
      };
      this.$http
        .post('/sat-ruminants/custom/nutritionList', query)
        .then((res) => {
          this.list=res.data;
        })
    },
  },
};
在DietNutrition页面  日粮营养
export default {
  data() {
    return {
    };
  },
  watch: {
    AAA(val) {
      if (val) { this.getDetail(); }
    },
  },
  methods: {
  	getDetail() {
      let query = {
        ...this.baseform,
      };
      this.$http
        .post('/sat-ruminants/custom/nutritionList', query)
        .then((res) => {
          this.list=res.data;
        })
    },
  },
};