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

我的实现方式是通过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],
        }
      ]

    };
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

上面的代码我们先把他的父亲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);
    },
1
2
3
4
5
6
7
8

完整代码:

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

实现效果如图：