ts 将100个元素，每行显示9个元素，然后显示出所有行的元素，由此我们延伸出一个项目需求的简单算法实现。

1、先看一下baidu ai出的结果：

2、我们将上面的代码修改下，定义一个数组，然后记录每行的行号及相应的元素：

<template>
  <div>console</div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
const list = reactive([] as any[]);
function printRows(elementsCount: number, elementsPerRow: number): void {
  const rowsCount = Math.ceil(elementsCount / elementsPerRow);
  for (let i = 0; i < rowsCount; i++) {
    let row = "";
    for (let j = 0; j < elementsPerRow; j++) {
      const elementIndex = i * elementsPerRow + j;
      if (elementIndex < elementsCount) {
        row += `${elementIndex}, `;
      } else {
        break; // 超出元素总数，退出内层循环
      }
    }
    list.push({
      row: i,
      rowElements: row,
    });
    // console.log(row.trim().replace(/, $/, "")); // 移除末尾的逗号并打印
  }
  for(let i = 0; i < list.length; i++){
    console.log(list[i].row, list[i].rowElements)
  }
}

onMounted(() => {
  printRows(100, 9);
});
</script>

3、我们再将上面的代码优化下，让其存对象。

代码：

<template>
  <div>console</div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
const list = reactive([] as any[]);
function printRows(sourceList, elementsPerRow: number) {
  let elementsCount = sourceList.length;
  const rowsCount = Math.ceil(elementsCount / elementsPerRow);
  for (let i = 0; i < rowsCount; i++) {
    // let row = "";
    let rowList = [];
    for (let j = 0; j < elementsPerRow; j++) {
      const elementIndex = i * elementsPerRow + j;
      if (elementIndex < elementsCount) {
        rowList.push(sourceList[elementIndex]);
      } else {
        break; // 超出元素总数，退出内层循环
      }
    }
    list.push({
      row: i,
      rowElements: rowList,
    });
    // console.log(row.trim().replace(/, $/, "")); // 移除末尾的逗号并打印
  }
  for (let i = 0; i < list.length; i++) {
    console.log(list[i].row, list[i].rowElements);
  }
}

onMounted(() => {
  printRows(
    [
      {
        id: 1,
        name: "a",
      },
      {
        id: 2,
        name: "b",
      },
      {
        id: 3,
        name: "c",
      },
      { id: 4, name: "d" },
      {
        id: 5,
        name: "e",
      },
      {
        id: 6,
        name: "f",
      },
      {
        id: 7,
        name: "g",
      },
      {
        id: 8,
        name: "h",
      },
      {
        id: 9,
        name: "i",
      },
      {
        id: 10,
        name: "j",
      },
      {
        id: 11,
        name: "k",
      },
      {
        id: 12,
        name: "l",
      },
      {
        id: 13,
        name: "m",
      },
      {
        id: 14,
        name: "n",
      },
      {
        id: 15,
        name: "o",
      },
      {
        id: 16,
        name: "p",
      },
      {
        id: 17,
        name: "q",
      },
    ],
    9
  );
});
</script>

4、最后，项目有这样的需求：用户输入一串字符串，然后我们要根据串的情况，进行自动填到相应的位置上去，来达到整个canvas的输出，也就是达到输出到指定的位置上，但是用户输入情况比较复杂，所以我们就要根据canvas的宽度与高度来自动进行计算，最好我们就有了上面的处理。