这种分页滚动加载如何处理？

Question

  假设 let group = [
    {label:"a",count:25},
    {label:"b",count:3},
    {label:"c",count:4},
  ]
  现在有10条数据塞进来，那么这个时候结果为
  let result = [
    {label:"a",count:25,children:[]*10},
  ]
  当我再加10条数据进来，结果为
  let result = [
    {label:"a",count:25,children:[]*20},
  ]
  当我再加10条数据进来，这个时候超出了label:"a"的count(25)，那么结果为
  let result = [
    {label:"a",count:25,children:[]*25},
    {label:"b",count:25,children:[]*3},
    {label:"c",count:25,children:[]*2}
  ]
  再加2条进来
  let result = [
    {label:"a",count:25,children:[]*25},
    {label:"b",count:25,children:[]*3},
    {label:"c",count:25,children:[]*4}
  ]

Answer 1

这个函数 addToResult 接受两个参数：要添加的数据数组 dataArray 和要添加的数据数量 dataCount。它会将数据填充到 group 数组的 children 数组中，保证数组的长度与 count 属性相符。在填充完成后，函数将返回填充好的结果数组。

let group = [
  { label: "a", count: 25 },
  { label: "b", count: 3 },
  { label: "c", count: 4 },
];

function addToResult(dataArray, dataCount) {
  let result = JSON.parse(JSON.stringify(group));
  result.forEach((item) => {
    item.children = [];
  });

  let totalDataToAdd = dataCount;
  let index = 0;

  while (totalDataToAdd > 0) {
    if (index >= result.length) {
      index = 0;
    }

    let availableSpace = result[index].count - result[index].children.length;

    if (availableSpace > 0) {
      let dataToAdd = Math.min(availableSpace, totalDataToAdd);
      totalDataToAdd -= dataToAdd;

      for (let i = 0; i < dataToAdd; i++) {
        result[index].children.push(dataArray.shift());
      }
    }

    index++;
  }

  return result;
}

const dataToPush = new Array(10).fill("data");
let result = addToResult(dataToPush, 10);
console.log("result after pushing 10 items:", result);

result = addToResult(dataToPush, 10);
console.log("result after pushing another 10 items:", result);

result = addToResult(dataToPush, 10);
console.log("result after pushing another 10 items:", result);

result = addToResult(dataToPush, 2);
console.log("result after pushing another 2 items:", result);

Answer 2

var group = [
    {label:"a",count:25},
    {label:"b",count:3},
    {label:"c",count:4},
];
// 实现函数
function addItemInGroup (group, data) {

    data = [...data];

    group.some(v => {
        v.children = v.children || [];

        if (v.children.length >= v.count) {
            return;
        }

        let setData = data.splice(0, v.count - v.children.length);

        v.children.push(...setData);

        return !data.length;
    });
}
// 仿真模拟
let result = [1,2,3,4,5,6,7,8,9,10];
let cloneDeep = (v) => JSON.parse(JSON.stringify(v));

addItemInGroup(group, result);
console.log("result after pushing 10 items:", cloneDeep(group));

addItemInGroup(group, result);
console.log("result after pushing another 10 items:", cloneDeep(group));

addItemInGroup(group, result);
console.log("result after pushing another 10 items:", cloneDeep(group));

addItemInGroup(group, [1,2]);
console.log("result after pushing another 2 items:", cloneDeep(group));

Answer 3

const opts = readonly([
  { label: "a", count: 25 },
  { label: "b", count: 3 },
  { label: "c", count: 4 },
]);

const state = reactive({
    tableData: []
});

// 取用计算属性的值就好了
const formatTableData = computed(
    () => state.tableData,
    val => {
        let index = 0;
        return toRaw(opts).map(item => {
            let oldIndex = index;
            index += item.count;
            retrun ({
                ...item,
                // 确认上一次是否已经取完
                children: val.length <= oldIndex ? val.slice(oldIndex, index) : []
            })
        })
    }
)