在vue中实现Swiper多行多列布局

这个问题困扰了本人好几天，调样式调的头疼，最后同组的老大给我指点迷津，其实不必要每个swiper容器都要将宽高定义，但是swiper-slide需要一个高，里面的内容可以自己更换，老大的一句其实很简单，总能让人如醍醐灌顶一样，恍然大悟，或许这就是经验的力量吧。
下面进入正题：

参考swiper官方文档的示例进行更改，将html换到vue中即可，
代码如下：
template中定义好数据,这里就用静态页面代替了：

<template>
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">Slide 1</div>
              <div class="swiper-slide">Slide 2</div>
              <div class="swiper-slide">Slide 3</div>
              <div class="swiper-slide">Slide 4</div>
              <div class="swiper-slide">Slide 5</div>
              <div class="swiper-slide">Slide 6</div>
              <div class="swiper-slide">Slide 7</div>
              <div class="swiper-slide">Slide 8</div>
              <div class="swiper-slide">Slide 9</div>
              <div class="swiper-slide">Slide 10</div>
            </div>
        </div>
    </div>
</template>

HTML

COPY

之后是在js部分需要初始化swiper
先import Swiper from 'swiper'
然后在mounted中初始化

  var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      slidesPerColumn: 2,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

JavaScript

COPY

最后写一下样式即可
注意这里写完之后slide内部的样式还需要自己写

    .swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          height: calc((100% - 30px) / 2);

          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
    }