vue使用flex布局做自适应宽度到5的倍数的div换行

最新推荐文章于 2024-07-28 22:02:05 发布

AzeShinja

最新推荐文章于 2024-07-28 22:02:05 发布

阅读量1k

点赞数

分类专栏： CSS Vue 文章标签：前端

本文链接：https://blog.csdn.net/AzeShinja/article/details/124107651

版权

Vue 同时被 2 个专栏收录

55 篇文章 3 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

本文详细描述了如何使用HTML和CSS通过双层for循环，将数组数据每5个元素分为一组，并在页面上展示。作者展示了在Vue组件中创建考试题目列表的步骤，包括`splitItemEveryFive`和`afterSplitList`函数的应用，最终实现了按题目的合理布局。

摘要由CSDN通过智能技术生成

我的实现方式是通过html中双层for循环做的

首先我们把数组数据处理一下，因为我们是每5个元素分成一个div

看下数据格式：

 data() {
    return {
      examList: [
        {
          title: '正题',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: '正题1',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
        },
        {
          title: '正题2',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: '正题3',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: '正题4',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: '正题5',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        }
      ]

    };
  },

<div class="fl" v-for="start in splitItemEveryFive(exam)">
.....
</div>
    splitItemEveryFive(exam) {
      return Math.floor(exam.listData.length / 5) + 1;
    },

上面的代码我们先把他的父亲div写出来了, 例如我们有13个元素。那么我们就遍历4次父亲div，然后再子div中根据下标值循环5次

子div中的处理

  <topic-no-item
       v-for="item in afterSplitList(exam, start - 1)"
       :topicIndex="item"
       :hasChecked="false"
   />
    afterSplitList(exam, start) {
      return exam.listData.slice(start * SPLIT_NUM, start * SPLIT_NUM + SPLIT_NUM);
    },

完整代码:

<template>
  <main class="exam-no-main">
    <div class="exam-no-wrapper">
      <div class>
        <exam-header height="44px" title="题目列表" />
      </div>
      <div class="exam-no-body">
        <div v-for="exam in examList">
          <div class="exam-no-body-title">{{ exam.title }}</div>
          <div class="exam-no-body-list">
            <div class="display-flex" v-for="start in splitItemEveryFive(exam)">
              <topic-no-item
                v-for="item in afterSplitList(exam, start - 1)"
                :topicIndex="item"
                :hasChecked="false"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
import TopicNoItem from './TopicNoItem';
import ExamHeader from '../components/ExamHeader';

const SPLIT_NUM = 5;
export default {
  name: 'TopicNoList',
  components: {
    TopicNoItem,
    ExamHeader,
  },
  data() {
    return {
      examList: [
        {
          title: '正题',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: '正题1',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
        },
        {
          title: '正题2',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: '正题3',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: '正题4',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: '正题5',
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        }
      ]

    };
  },
  created() { },
  watch: {
  },
  methods: {
    afterSplitList(exam, start) {
      return exam.listData.slice(start * SPLIT_NUM, start * SPLIT_NUM + SPLIT_NUM);
    },
    splitItemEveryFive(exam) {
      return Math.floor(exam.listData.length / 5) + 1;
    },
  },
};
</script>
<style lang='scss' scoped>
.exam-no-main {
  background-color: #f0f2f5;
  min-height: 100%;
  position: relative;
  width: 278px;
  box-sizing: border-box;
}
$padding-top-bottom: 20px;
$padding-left-right: 20px;
.exam-no-wrapper {
  background: #ffffff;
  height: calc(100% - $padding-top-bottom * 2);
  width: calc(100% - $padding-left-right * 2);
  top: $padding-top-bottom;
  left: $padding-left-right;
  border-radius: 8px;
  position: absolute;
  .exam-no-body {
    padding: 15px;
    box-sizing: border-box;
    // 45是头部题目列表的高度
    height: calc(100% - 45px);
    overflow-y: auto;
    &-title {
      font-size: 12px;
      width: 90%;
      text-align: left;
      margin: 12px auto;
      color: #909399;
    }
    .display-flex {
      display: flex;
      min-width: 160px;
    }
    &-list {
      display: flex;
      width: 90%;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
  }
}
</style>