一个完美实现多列布局的方式

效果展示：

 

vue3代码实现：

<script setup lang="ts">

import { ref } from "vue";

// 原始数据，这里通常是从后端接口得来的数据

let itemList = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

/**

 * 对原始数据加工

 * @param {Array} arr 原始数据

 * @param {number} num 一行中的元素的最大数量

 */

function handleData(arr: Array<number | null>, num: number) {

  let count: number = arr.length / num;

  let data: Array<Array<number | null>> = [];

  for (let i = 0; i < count; i++) {

    let item = arr.slice(i * num, i * num + num);

    data.push(item);

  }

  // 对data中的最后一个元素做处理，当该元素的长度小于num时，用null补齐

  if (data[data.length - 1] && data[data.length - 1].length < num) {

    let len = num - data[data.length - 1].length;

    for (let j = 0; j < len; j++) {

      data[data.length - 1].push(null);

    }

  }

  return data;

}

let data = handleData(itemList.value, 4);

</script>

<template>

  <main>

    <div class="father-box">

      <div class="inner-box" v-for="(option, i) in data" :key="i">

        <div

          v-for="(item, j) in option"

          :key="j"

          :class="{ item: true, hidden: !item && item !== 0 }"

        >

          {{ item }}

        </div>

      </div>

    </div>

  </main>

</template>

<style lang="less" scoped>

.father-box {

  width: 400px;

  height: 200px;

  border: 1px red solid;

  margin: 100px;

}

.inner-box {

  display: flex;

  justify-content: space-between;

  width: 100%;

  margin-bottom: 10px;

}

.item {

  width: 20%;

  background: lightpink;

}

.hidden {

  visibility: hidden;

  height: 0;

}

</style>