2024年vue数据太多导致页面卡顿解决办法_vue下拉框数据过多卡顿的原因，花三分钟看完这篇文章你就懂了

本文链接：https://blog.youkuaiyun.com/2401_84411522/article/details/138448496

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

<template>
  <!-- 表格 -->
  <div class="table-container">
    <ux-grid
      ref="plxTable"
      border
      :data="tableData"
      row-id="key"
      :tree-config="{lazy: true, children: 'children', hasChild: 'hasChildren', loadMethod: load}"
      :expand-config="{ labelField: 'key', expandAll: false}"
    >
      <ux-table-column
        v-for="(item, index) in tableConfig"
        :key="index"
        align="center"
        :field="item.prop"
        :title="item.label"
        :width="tableData.length ? item.width : 'auto'"
        :fixed="item.fixed"
        :tree-node="item.prop == 'key'"
      >
        <template slot-scope="{ row }">
          <span>{{ row[item.prop] }}</span>
        </template>
      </ux-table-column>
    </ux-grid>
  </div>
</template>

load 方法里面是后端请求回来的数据，需要return出去

methods: {
    async load({ row }) {
      let nodes = []
      this.$store.commit('settings/CHANGE_LOADING', true)
      try {
        const res = await queryUsersStatistics({
          date: this.date,
          appKey: row.key
        })
        const { success, data } = res
        if (success && data) {
          console.log(data)
          nodes = data.map((item) => {
            const { key, total, minuteCountTable } = item
            return {
              key,
              total,
              ...minuteCountTable
            }
          })
        }
        this.$store.commit('settings/CHANGE_LOADING', false)
      } catch (error) {
        console.log(error)
        this.$store.commit('settings/CHANGE_LOADING', false)
      }
      console.log('nodes', nodes)
      return nodes
    }
  }

总结