分页器都出不来，请大神们帮看下

chaim024 · 发表于 2019-9-17 17:46:35

按照swiper的api上的实例写的代码，分页器都出不来，用调试工具看下分页器标签里面没有任何子标签，请大神们帮看下

HTML 代码如下：
<div id="app">
<div v-show="list.length" class="col-md-6" v-cloak>
<div class="card swiper-container" id="swiper1">
<div class="swiper-wrapper">
<div class="card-body swiper-slide" v-for="(li, idx) in list" :key="li.oid">
<div class="table-responsive">
<table class="table table-bordered">
<thead class="top head">
<tr>
<th>看板号</th>
<th class="text-thick"><a :href="'board.php?oid=' + li.oid">{{li.oid}}</a></th>
<th>产品名</th>
<th class="text-thick">{{li.productname}}</th>
</tr>
<tr>
<th>部件名</th>
<th class="text-thick">{{li.partname}}</th>
<th>计划产量</th>
<th class="text-thick">{{li.count}}</th>
</tr>
<tr>
<th class="noteheight">备注</th>
<th colspan="3" class="text-thick noteleft">{{li.note}}</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive swiperh">
<table class="table table-striped">
<thead>
<tr>
<th width="20%">工序名</th>
<th>完成数量</th>
<th>完成日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in li.list" :key="index">
<td class="text-nowrap">{{item.progressname}}</td>
<td><input type="number" :disabled="item.disabled" placeholder="填写数量" v-model="item.finishcount" /></td>
<td>{{item.finishdate}}</td>
<td class="btn-group" role="group">
<button type="button" :disabled="item.disabled" class="btn btn-lg btn-default" @click="handleClickSubmit(idx, index)">提交</button>
</td>
</tr>
<tr v-for="im in objTmp[li.oid]">
<td></td>
<td></td>
<td></td>
<td></td>
<tr>
</tbody>
</table>
</div>
</div>
</div>
      <div class="swiper-pagination" id="swiper-pagination"></div>
</div>
</div>
<div v-show="!list.length" class="noData"><span>暂时没有要处理的任务！</span></div>
</div>

js 代码如下：（只选取其中swiper部分）
            mounted() {
                  new Swiper('#swiper1', {  //swiper初始化
                     direction: 'vertical', //滑动方向为竖向
                     pagination: {          //分页器
                        el: '#swiper-pagination', //分页器选择器
                        type: 'bullets',    //分页器类型
                     },
                     paginationClickable: true,
                     observer: true,//修改swiper自己或子元素时，自动初始化swiper
                     observeParents: true,//修改swiper的父元素时，自动初始化swiper
                  });
            },