elementui中el-tabs组件下的组件包含el-table，解决切换tab时table闪动问题

在Element UI中，使用el-tabs组件时，如果每个tab页面中包含el-table组件，可能会遇到切换tab导致表格闪动的问题。这个问题通常是由于渲染性能问题造成的。

为了解决这个问题，可以尝试以下几种方法：

1. 使用v-if代替v-show来控制tab的显示。v-if是惰性的，只有当对应的tab处于激活状态时，才会渲染其内容，这可以减少不必要的计算。
2. 对el-table使用lazy属性。如果表格中的数据量很大，可以使用lazy属性，它会在表格滚动到可见区域内的数据时才进行渲染。
3. 使用v-loading指令在切换tab时给表格加上加载状态，避免在不必要的时候渲染表格。

以下是一个简单的示例代码：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
      <el-table
        v-loading="loading"
        :data="userTableData"
        style="width: 100%">
        <!-- 表格列定义 -->
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">
      <el-table
        v-loading="loading"
        :data="configTableData"
        style="width: 100%">
        <!-- 表格列定义 -->
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>
 
<script>
export default {
  data() {
    return {
      activeName: 'first',
      userTableData: [], // 用户表格数据
      configTableData: [], // 配置表格数据
      loading: false
    };
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'first') {
        // 加载用户数据
        this.loading = true;
        // 模拟异步加载数据
        setTimeout(() => {
          this.userTableData = [...]; // 用户数据
          this.loading = false;
        }, 1000);
      } else if (tab.name === 'second') {
        // 加载配置数据
        this.loading = true;
        // 模拟异步加载数据
        setTimeout(() => {
          this.configTableData = [...]; // 配置数据
          this.loading = false;
        }, 1000);
      }
    }
  }
};
</script>

在这个示例中，我们使用了v-loading来在表格数据加载时显示加载状态，并且在handleClick方法中，我们在切换tab前设置loading为true，在数据加载完成后设置为false，这样可以避免在数据还未加载完成时渲染表格，从而减少闪动问题。