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

相关推荐
麦麦大数据3 小时前
F036 vue+flask中医热性药知识图谱可视化系统vue+flask+echarts+mysql
vue.js·python·mysql·flask·可视化·中医中药
技术钱4 小时前
vue3前端解析excel文件
前端·vue.js·excel
韩立学长5 小时前
【开题答辩实录分享】以《智慧校园勤工俭学信息管理系统的设计与实现》为例进行答辩实录分享
vue.js·spring boot·微信小程序
@PHARAOH5 小时前
HOW - localstorage 超时管理方案
前端·javascript·vue.js
DokiDoki之父5 小时前
前端速通—Vue_简介 & 第一个Vue程序 & el:挂载点 & data:数据对象 & Vue指令
javascript·vue.js·ecmascript
Crystal3287 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476687 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
CptW9 小时前
Vue3 的“批量渲染”机制
vue.js·面试
计算机学姐9 小时前
基于SpringBoo+Vue的医院预约挂号管理系统【个性化推荐算法+可视化统计】
java·vue.js·spring boot·mysql·intellij-idea·mybatis·推荐算法
计算机学姐9 小时前
基于微信小程序的奶茶店点餐平台【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis