携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

1. 存在的问题

继上一篇文章“vue + element ui 走马灯切换预览表格数据”，我发现存在一个问题，那就是页面初始化的时候加载特别慢，往往需要等上好长一段时间，特别是当 table.json 文件越大，页面加载的就越慢。经过检查，我发现造成这种现象的原因是因为页面初始化时，我将 table.json 中的所有数据一次性都渲染到了走马灯上。

2. 解决办法

经过一番研究，我发现其实每一次页面初始化的时候走马灯只会默认展示其中一个幻灯片，只有当点击切换时才会展示下一个幻灯片，那么也就意味着，页面初始化的时候我只需要从 table.json 拿出一组数据绑定到其中一个幻灯片上进行渲染就行，对于其他的数据，在切换时才进行绑定及渲染，并不需要全部显示，这样就能大大提高页面的加载速度了。

3. 具体实现

3.1 HTML 代码

<template>
  <div class="app-container">
    <!-- 走马灯 -->
    <el-carousel
      indicator-position="outside"
      arrow="always"
      :autoplay="false"
      height="60px"
      trigger="click"
      style="padding: 0 10px; margin-top: 10px"
      @change="detailChangeTable"
    >
      <el-carousel-item
        v-for="(item, index) in detailTableDatas"
        :key="index"
        :name="index"
        :label="index"
      >
        <div style="color: black; font-size: 16px; text-align: center">
          <div style="margin-bottom: 10px; font-weight: bold; font-size: 17px">{{ item["title"] }}</div>
          <span>{{ item["describe"] }}</span>
        </div>

      </el-carousel-item>
    </el-carousel>

    <!-- 表格 -->
    <div v-if="isReloadData" style="width: 100%;height: auto;display: flex;flex-flow: row wrap;justify-content: space-around;margin-top: 5px;" >
      <div style="width: 67%; padding: 0 10px">
        <el-table :data="currentTableDatas['table2']" border height="600" :cell-style="addClass">
          <el-table-column
            v-for="(combination_item, combination_index) in currentTableDatas['table2'][0]"
            :key="combination_index"
            align="center"
            :label="combination_index"
            :prop="combination_index"
          />
        </el-table>
      </div>
      <div style="width: 30%; padding: 0 10px">
        <el-table :data="currentTableDatas['table1']" border height="600" :cell-style="addClass">
          <el-table-column
            v-for="(fix_item, fix_index) in currentTableDatas['table1'][0]"
            :key="fix_index"
            align="center"
            :label="fix_index"
            :prop="fix_index"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

3.2 Script 代码

1. addClass()：设置表格样式的方法
2. detailChangeTable()：走马灯切换幻灯片的方法，其作用是切换时根据新的 tag 获取新的表格数据
3. reloadPart()：局部刷新页面的方法，在需要刷新的地方绑定 v-if="isReloadData"，在需要触发的方法中调用该方法 this.reloadPart()。因为切换幻灯片时，表格会出现空白的区域，所以在切换时调用该方法可以解决这个 bug。

<script>
import allTableDatas from "../../../static/table.json"; //获取本地json
export default {
  name: "App",
  data() {
    return {
      isReloadData: true, // 局部刷新标识（刷新指定区域）
      detailTableDatas: {},// 所有幻灯片表格数据
      currentTableDatas:{}// 第一个幻灯片表格数据
    };
  },

  created() {
    // 获取所有幻灯片表格数据
    this.detailTableDatas = allTableDatas

    // 获取第一个幻灯片表格数据
    var currentKey = Object.keys(this.detailTableDatas)[0]
    this.currentTableDatas =this.detailTableDatas[currentKey]
  },

  methods: {
    // 设置表格样式
    addClass({ columnIndex }) {
      // 第一列样式
      if (columnIndex === 0) {
        return {
          fontWeight: 'bold',
          background: '#f0f9eb',
          fontSize: '14px',
          color: '#27a2ff'
        }
      }
    },
    
    // 局部刷新方法
    reloadPart() {
      this.isReloadData = false
      this.$nextTick(() => {
        this.isReloadData = true
      })
    },
    
    // 幻灯片切换方法
    detailChangeTable(newIndex) {
      // 获取切换时的tag
      var current_key = Object.keys(this.detailTableDatas)[newIndex]
      // 根据tag获取表格数据
      this.currentTableDatas = this.detailTableDatas[current_key]

      // 局部刷新页面，防止表格出现空白区域
      this.reloadPart()
    },
  },
};
</script>

3.3 效果演示