世界尽头crud 2022-02-16 11:34 采纳率: 66.7%
浏览 1027
已结题

vue 的 tree-table组件 渲染太多数据导致页面卡顿 如何解决

img

数据就1000多,页面上的 dom 太多,导致整个页面卡顿。应该从哪几个方面优化? 或者减少页面上的dom?
此表数据无法进行真分页,应为数据都在一个表中,有子父节点。

  • 写回答

6条回答 默认 最新

  • qq_37749055 2022-02-16 11:40
    关注

    1.减少数据返回字段中不用的去掉 减少点内容 这种 效果不明显
    2. 用懒加载的方式 先展示一级 点击一然后展开二级 以此类推

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 崽崽的谷雨 2022-02-16 11:39
    关注

    那 就只能 ,点击展开 按钮再请求它下面的子数据 。

    就是这个 例子,虽然 你用的不是这个 ,但思想可以借鉴 。你点开 展开按钮,请求该 节点的子节点 。

    评论 编辑记录
  • 程序员啊楠 前端领域新星创作者 2022-02-16 11:55
    关注

    img


    做一下懒加载,当点击的时候才会去请求下一级数据

    评论
  • 你好!机器人 2022-02-16 11:58
    关注

    设置 Table 的 lazy 属性为 true 与加载函数 load
    https://element.eleme.cn/#/zh-CN/component/table

    
    <el-table
        :data="tableData1"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    
    methods: {
          load(tree, treeNode, resolve) {
            setTimeout(() => {
              resolve([
                {
                  id: 31,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                }, {
                  id: 32,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                }
              ])
            }, 1000)
          }
    
    评论
  • jiojio在学习勒 2022-02-17 09:44
    关注

    有懒加载

    img

    评论
  • 有问必答小助手 2022-02-18 09:43
    关注
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    评论
查看更多回答(5条)

报告相同问题?

问题事件

  • 系统已结题 2月26日
  • 已采纳回答 2月18日
  • 创建了问题 2月16日

悬赏问题

  • ¥15 求局部放电案例库,用于预测局部放电类型
  • ¥100 QT Open62541
  • ¥15 stata合并季度数据和日度数据
  • ¥15 c语言练习:统计词频
  • ¥15 谁能提供rabbitmq,erlang,socat压缩包,记住版本要对应
  • ¥15 Vue3 中使用 `vue-router` 只能跳转到主页面?
  • ¥15 用QT,进行QGIS二次开发,如何在添加栅格图层时,将黑白的矢量图渲染成彩色
  • ¥50 监控摄像头 乐橙和家亲版 保存sd卡的文件怎么打开?视频怎么播放?
  • ¥15 Python的Py-QT扩展库开发GUI
  • ¥60 提问一下周期性信信号的问题