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

问题描述：

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

实现效果:

注意看当前激活的el–tabs，对应tabs才调用请求（蓝色下划线）

解决方案：

<el-tabs
     v-model="activeName"
      style="width: 100%"
      @tab-click="handleClick"
    >
      <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;
        })
    },
  },
};

问题总结如下：

要点一：以上述为例，日粮预估页面为默认的激活页面，直接在 mounted() { this.getList(); }, 里调用函数，当页面刷新时就会立即调用

要点二:日粮营养页为了避免一开始就调用接口，因此不能在mounted中调用；在这里我们使用监听，原始值为false，进行一次切换后变成ture，并且以后不再变化永远都为true，所以请求不会在切换时再多次调用。

要点三：如果想要在每次切换时实时刷新，只需要将状态不停切换即可

代码007普通

打赏 收藏 海报 链接