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

Question

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

Answer 1

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

Answer 2

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

Element - The world's most popular Vue UI framework Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 https://element.eleme.cn/#/zh-CN/component/tree#lan-jia-zai-zi-ding-yi-xie-zi-jie-dian

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

Answer 3

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

Answer 4

设置 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)
      }

Answer 5

有懒加载

Answer 6

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632