demo 例子

<template>
  <div>
    <p>
      <vxe-button @click="loadData(10)">加载10条</vxe-button>
      <vxe-button @click="loadData(500)">加载500条</vxe-button>
      <vxe-button @click="loadData(10000)">加载1w条</vxe-button>
      <vxe-button @click="loadData(100000)">加载10w条</vxe-button>
      <vxe-button @click="loadData(300000)">加载30w条</vxe-button>
      <vxe-button @click="loadData(500000)">加载50w条</vxe-button>
    </p>

    <vxe-list height="700" class="my-list" :loading="loading" :data="list">
      <template #default="{items}">
        <div class="my-list-item" v-for="item in items" :key="item.id">
          <ul style="display: flex">
            <li v-for="current in item.items" :key="current.id">
              <el-card style="height: 220px; width: 184px" shadow="hover"> {{ current.id }} </el-card>
            </li>
          </ul>
        </div>
      </template>
    </vxe-list>
  </div>
</template>

<script setup>
import {ref, onMounted, nextTick, computed, watchEffect} from 'vue';
import {VXETable} from 'vxe-table';
import useResize from '@/renderer/index/composables/useResize.js';

const loading = ref(false);
const list = ref([]);

function groupDataByRows(data, colNum) {
  const result = [];
  let rowIndex = 0;

  while (data.length > 0) {
    const row = {
      id: rowIndex,
      label: 'row_' + rowIndex,
      items: []
    };

    for (let i = 0; i < colNum; i++) {
      if (data.length > 0) {
        row.items.push(data.shift());
      }
    }

    result.push(row);
    rowIndex++;
  }

  return result;
}

// 模拟后台
const mockList = [];
const getList = (size) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (size > mockList.length) {
        for (let index = mockList.length; index < size; index++) {
          mockList.push({
            id: index,
            label: `row_${index}`
          });
        }
      }
      resolve(mockList.slice(0, size));
    }, 100);
  });
};

const colNum = computed(() => {
  return Math.max(1, Math.floor(width.value / (186 + 30)));
});

const loadData = async (size) => {
  loading.value = true;

  list.value = groupDataByRows(await getList(size), colNum.value);

  // console.log('list.value', JSON.stringify(list.value));
  loading.value = false;
  const startTime = Date.now();
  await nextTick();
  await VXETable.modal.message({content: `渲染 ${size} 行，用时 ${Date.now() - startTime}毫秒`, status: 'info'});
};

const {width} = useResize();

watchEffect(() => {
  console.log('watch colNum', colNum.value);
  loadData(200);
});

// 初始化
onMounted(async () => {
  loadData(200);
});
</script>

<style scoped>
.my-list {
  border: 1px solid #e8eaec;
}
.my-list .my-list-item {
  height: 230px;
}

.my-list-item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.my-list-item li + li {
  margin-left: 20px;
}
</style>

const data2 = [
  {id: 0, label: 'col_0'},
  {id: 1, label: 'col_1'},
  {id: 2, label: 'col_2'},
  {id: 3, label: 'col_3'},
  {id: 4, label: 'col_4'},
  {id: 5, label: 'col_5'},
  {id: 6, label: 'col_6'},
  {id: 7, label: 'col_7'},
  {id: 8, label: 'col_8'},
  {id: 9, label: 'col_9'},
  {id: 10, label: 'col_10'}
];

function myFn(data2, colNum) {
  const result = [];
  let rowIndex = 0;

  while (data2.length > 0) {
    const row = {
      id: rowIndex,
      label: 'row_' + rowIndex,
      items: []
    };

    for (let i = 0; i < colNum; i++) {
      if (data2.length > 0) {
        row.items.push(data2.shift());
      }
    }

    result.push(row);
    rowIndex++;
  }

  return result;
}

const data3 = myFn(data2, 3);
console.log(data3);

// // 写一个函数，输入每行 3 列
// function myFn(data2, colNum) {
//   // coding
//   const result = [];
//   return result;
// }

// const data3 = myFn(data2, 3);

// // 希望结果如下：
// // data3 = [
// //   {
// //     id: 0,
// //     label: 'row_0',
// //     items: [
// //       {id: 0, label: 'col_0'},
// //       {id: 1, label: 'col_1'},
// //       {id: 2, label: 'col_2'}
// //     ]
// //   },
// //   {
// //     id: 1,
// //     label: 'row_1',
// //     items: [
// //       {id: 4, label: 'col_4'},
// //       {id: 5, label: 'col_5'},
// //       {id: 6, label: 'col_6'}
// //     ]
// //   },
// //   {
// //     id: 2,
// //     label: 'row_2',
// //     items: [
// //       {id: 7, label: 'col_7'},
// //       {id: 8, label: 'col_8'},
// //       {id: 9, label: 'col_9'}
// //     ]
// //   },
// //   {id: 3, label: 'row_3', items: [{id: 10, label: 'col_10'}]}
// // ];