By 朱阳星

文章目录
  1. 1. 问题
  2. 2. 希望实现功能：
  3. 3. 实现方案：

最近做项目碰到一个问题：

问题

一个选项卡容器里有多个选项卡，每个选项卡都有很多内容，所以做成每个选项卡一个组件，正常写下去是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
<el-tabs v-model="activeName">
  <el-tab-pane label="用户管理" name="first">用户管理
    <el-comp-a></el-comp-a>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理
    <el-comp-b></el-comp-b>
  </el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理
    <el-comp-c></el-comp-c>
  </el-tab-pane>
</el-tabs>
</template>
<script>
import componentA from "@/components/componentA";
import componentB from "@/components/componentB";
import componentC from "@/components/componentC";

export default {
  components: {
    "el-comp-a":  componentA,
    "el-comp-b":  componentB,
    "el-comp-c":  componentC,
  },
  data() {
    return {
      activeName: 'second'
    };
  }
};
</script>

其中这三个组件每个都有AJAX请求,这样就相当于打开这个页面就会同时发送三个请求，如果用户不点击配置管理和角色管理选项卡则多请求了两次

希望实现功能：

点击该选项卡的时候再做该选项卡的请求并展示数据

实现方案：

1
2
3
4
5
6
7
8
9
10
11
<el-tabs v-model="activeName">
  <el-tab-pane label="用户管理" name="first">用户管理
    <el-comp-a v-if="activeName==first"></el-comp-a>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理
    <el-comp-b v-if="activeName==second"></el-comp-b>
  </el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理
    <el-comp-c v-if="activeName==third"></el-comp-c>
  </el-tab-pane>
</el-tabs>

只需增加v-if的条件判断即可。问题解决
因为v-if是惰性的

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

文章目录
  1. 1. 问题
  2. 2. 希望实现功能：
  3. 3. 实现方案：