table切换只调用一次接口

由于用户使用量大,每次table切换重新请求接口会增加服务器压力,为了提高性能,当第一次点击table栏时才调用接口,当后面再点击就是用缓存不需要再请求接口,代码如下:

父组件代码:

<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="简介" name="detail">
        <div class="details" v-html="detailData.trainText"></div>
      </el-tab-pane>

      <el-tab-pane label="目录" name="lists">
        <Content ref="contentRef" :id="id" :flag="activeName"></Content>
      </el-tab-pane>

      <el-tab-pane label="评价" name="review">
        <Review :id="id" :flag="activeName"></Review>
      </el-tab-pane>

      <el-tab-pane label="答疑" name="question">
        <Questions :id="id" :flag="activeName"></Questions>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
//引入组件
import Content from "./components/content.vue";
import Review from "./components/review.vue";
import Questions from "./components/questions.vue";
export default {
  components: {
    Content,
    Review,
    Questions,
  },
  data() {
    return {
       //默认第一个简介
      activeName: "detail",
    };
  },
  methods: {},
};
</script>

子组件代码:

<template>
  <div>
    <div class="course-box">
      <template>
        <div v-for="(item, index) in list" :key="index">内容</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    //父组件接收的activeName
    flag: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      list: [], //外层列表
      isClick: false,
    };
  },
  watch: {
    //监听
    flag: {
      handler(e) {
        //当声明的isClick为true并且点击的时候==lists就调用接口
        if (!this.isClick && e == "lists") {
          this.onLoad();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //调用接口
    async onLoad() {
      let data = {
        trainId: this.id,
      };
      let res = await userTrain(data);
      if (res.code == 200) {
        this.list = res.data;
        //把声明的状态变了
        this.isClick = true;
      }
    },
  },
};
</script>

由此就完成了按需调用,提高服务器的性能,完结!