解决element ui中tabs组件切换没有加载对应页面方法

解决element ui中tabs组件切换没有加载对应页面方法

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tabsArr"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <components :is="item.name" v-if="item.name == nowName"></components>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import tabs1 from "../components/tabs1";
import tabs2 from "../components/tabs2";
import tabs3 from "../components/tabs3";
export default {
  components: { tabs1, tabs2, tabs3 },
  data() {
    return {
      activeName: "tabs1",
      nowName: "tabs1",
      tabsArr: [
        {
          label: "用户管理",
          name: "tabs1",
        },
        {
          label: "配置管理",
          name: "tabs2",
        },
        {
          label: "角色管理",
          name: "tabs3",
        },
      ],
    };
  },
  methods: {
    handleClick(tab) {
      this.nowName = tab.name;
    },
  },
  created() {},
};
</script>

最后总结：

element-ui中的tabs每次点击时都会给所有页面重新渲染，为的是保证当子页面存在需要实时加载的情况下能保证数据的更新。

但是当子页面过多，每次切换都会把所有页面都加载，就会占用过多的网络资源。

v-if这个方法适用于非频繁切换的场景。在当前的使用中是非常合适的。

v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;如果在运行时条件很少改变，使用 v-if 进行一个选择性渲染会比较好。