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
·
这里是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开始
"<div class='num infosCenter'>" +
(Number(oneIndex) + 1) +
"</div><div class='infos infosCenter'>" +
(val.Values[oneIndex].address ||
val.Values[oneIndex].name ||
"详细信息") +
"</div><div class='area infosCenter'>" +
(val.Values[oneIndex].rearea
? val.Values[oneIndex].rearea.toFixed(7)
: 0) +
"</div>";
// 每循环一次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);
});
}
},
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献3条内容
所有评论(0)