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的宽度与高度来自动进行计算，最好我们就有了上面的处理。