vue 大数据 渲染

这里是10个10个渲染

val：数据
id：渲染的盒子

  // 渲染
    tableRendering(val, id) {
      // 假设一共有99个数据 每次渲染10个 
      //需要插入的容器
      let container = document.getElementById(id);
      // 一共插入99条数据
      let total = val.Values.length;
      // 一次插入 10 条
      let once = 10;
      //总页数（99/10=9 页）
      let page = total / once;
      //每条记录的索引
      let index = 0;
      let oneIndex = 0;
      //循环加载数据
      var that = this;
      loop(total, index);
      function loop(curTotal, curIndex) {
        // 如果总数小于等于0 不执行
        if (curTotal <= 0) {
          return false;
        }
        // 取小的一个 （当都是10小的时候就取10 ，当总数小于10的时候则取小于10的）
        let pageCount = Math.min(curTotal, once);
        window.requestAnimationFrame(function () {
          var fragment = document.createDocumentFragment();
          //  循环10次
          for (let i = 0; i < pageCount; i++) {
            // 创建div
            let div = document.createElement("div");
            div.className = "threeInfos";
            div.innerHTML =
            // 编号从1开始
              "
" +
              (Number(oneIndex) + 1) +
              "
" +
              (val.Values[oneIndex].address ||
                val.Values[oneIndex].name ||
                "详细信息") +
              "
" +
              (val.Values[oneIndex].rearea
                ? val.Values[oneIndex].rearea.toFixed(7)
                : 0) +
              "
";
              // 每循环一次append一个dom
            fragment.appendChild(div);
            // 为每个dom添加一个点击事件
            div.onclick = function clickRow(e) {
              let num = Number(e.currentTarget.firstElementChild.innerText) - 1;
              that.rowClickOne(val.Values[num], val);
            };
            // 第多少个数据
            oneIndex = oneIndex + 1;
          }
          // 将10个放置到所创建的id container内
          container.appendChild(fragment);
          // 继续循环 99-10 ，0+10
          loop(curTotal - pageCount, curIndex + pageCount);
        });
      }
    },