html
<div class="box" v-for="(item,itemindex) in itemrank" :key="itemindex">
<div class="box-title" >
<div class="title-item"><span class="item-tag item-color">{{item.classify}}</span></div>
</div>
<div class="table-responsive">
<table class="table table-striped">
<thead style="background: #f9f9f9;">
<tr>
<th>排名</th>
<th></th>
<th>姓名</th>
<th>工号</th>
<th>完成数</th>
<th>标准工时</th>
<th>上班时间</th>
<th>工时利用率</th>
</tr>
</thead>
<tbody>
<tr v-for="(rankdata,rankindex) in rank(item.list)" :key="rankindex">
<td ><span class="ranktag">{{rankindex+1}}</span></td>
<td @click="clickImg($event,itemindex,rankindex)"><img class="smallimg" :class="bigger && x== itemindex&&y== rankindex?'selectimg':''" :onerror="defaultImg" :src="'http://aeshow/images/Employee/'+rankdata.photo" />
<img v-show="bigger && x== itemindex&&y== rankindex" class="bigimg" :onerror="defaultImg" :src="'http://aeshow/images/Employee/'+rankdata.photo" />
</td>
<td>{{rankdata.name}}</td>
<td>{{rankdata.cardId}}</td>
<td>{{rankdata.complete}}</td>
<td>{{rankdata.workT}}</td>
<td>{{rankdata.StandTime}}</td>
<td>
<div class="progress progress-striped active">
<div aria-valuemax="200" aria-valuemin="0" role="progressbar" class="progress-bar" :style="{width:rankdata.CompRate/2+'%'}">
<span class="sr-only"></span>
</div>
<span class="proPercent">{{rankdata.CompRate}}%</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>javascript
methods: {
rank: function(data) {
// return data.sort((a, b) => a.CompRate - b.CompRate).reverse();
return data.slice().sort((a, b) => a.CompRate - b.CompRate).reverse();
},此处注释的代码，为之前会报错的方法。