时间戳

首页 > 解决方案 > 如何让 Vuetify v-for 渲染更快

html - 如何让 Vuetify v-for 渲染更快

问题描述

您好，我是 vuejs 和 vuetify 的新手，我现在想显示大约 400 列和 6 行的项目，colum_id (cid) 和 row_id(rid) 但渲染速度很慢对不起，我知道如何提高这个循环性能谢谢在手：在此处输入图像描述

<v-layout>
      <div class="reglahan-table-result-betting">
        <tr
          v-for="i in 6"
          :key="i">
          <td
            v-for="j in 60"
            :key="j">
            <div
              v-for="(item, k) in props.resultBetting"
              :key="k">
              <span
                v-if="Number(item.cid) === j && Number(item.rid) === i"
                :class="item.color"
              />
            </div>
            <span class="no-circle" />
          </td>
        </tr>
      </div>
    </v-layout>

标签： htmlvue.jsfor-loopvuetify.jsv-for

解决方案

当然你可以优化它。问题是在你最内部的循环中，你循环数组的每个元素。你不应该那样做。

首先，您需要正确索引您的表，我将创建一个“计算”函数，如下所示：

computed: {
  indexedResultBetting: function () {
    let ret = {}
    self.props.resultBetting.forEach(function(item, index){
      if(!item.rid in ret)
        ret[item.rid] = {}
      ret[item.rid][item.cid] = item.color
    })
    return ret
  }
}

然后你可以简单地用类似的东西来展示它：

<v-layout>
  <div class="reglahan-table-result-betting">
    <tr
      v-for="i in Object.keys(indexedResultBetting)"
      :key="i">
      <td
        v-for="j in Object.keys(indexedResultBetting[i])"
        :key="j">
        <div          
          <span
            :class="indexedResultBetting[i][j]"
          />
        </div>
        <span class="no-circle" />
      </td>
    </tr>
  </div>
</v-layout>

我还没有测试它，肯定有一些修补要做。

推荐阅读