现在要解决的问题是,后台给我的数据太多 ,而我全部展示在页面上的话,就太多了,因此,是加一个 换一换 按钮,每点击一下就会 换5个不同的数据
第一 :页面上
<div class="identify" v-if="item.behaviorList.length>0">
<div style="display: flex;justify-content: space-between">
<p>相关行为</p>
<div class="change" @click="change_data(item)"><img src="@/assets/img/change.png" class="magnifier">换一换</div>
</div>
<span v-for="(info,index) in item.behaviorListFive " :key="item +displayname"
style="cursor:pointer"
@click="searchChildProblem(info)" >
<img src="@/assets/img/big.png" class="magnifier">
<span style="color: #0f7ffe;font-size: 14px">{{info.displayname }}</span>
</span>
<i class="bottom-line"></i>
</div>
第二,是处理从后台来的数据
watch: {
searchResult(searchResultValue) {
//相关行为
//取item.behaviorList前5个数据,放到新字段item.behaviorListFive
item.behaviorListFive = []
item.behaviorListPage = 1 //当前是1页
item.behaviorList.forEach((m,n)=>{
if(n<5){
item.behaviorListFive.push(m)
}
})
// 相关推荐
item.suggestListFive = []
item.suggestListPage = 1 //当前是1页
item.suggestList.forEach((m,n)=>{
if(n<5){
item.suggestListFive.push(m)
}
})
})
}
this.pageRecode = arr;//行为和科目数组
}
},
这里主要的代码是 //相关行为 那一部分
第三步是方法
/**
* item一级的数据 相关行为
* */
change_data (item) { //每次点击换一批触发这个方法
let arr = item.behaviorList//换一换的总数据
let page = item.behaviorListPage //页码
let tol_num = arr.length //总数据有多少个
//如果总共数量小于等于5条数据,换一换没有数据了,
if (tol_num <= page*5) {
//如果没有数据就从第一页开始
this.pageRecode.forEach(mmm=>{
if(mmm == item){
mmm.behaviorListFive = []
mmm.behaviorListPage = 1 //页码=1
mmm.behaviorList.forEach((n,i)=>{
if(i<5 ){ //回到初始化
mmm.behaviorListFive.push(n)
}
})
}
})
}else{
page++
//更改数据
this.pageRecode.forEach(mmm=>{
if(mmm == item){
mmm.behaviorListFive = []
mmm.behaviorListPage++ //页码增加1
mmm.behaviorList.forEach((n,i)=>{
if( i<page*5 && i>=(page-1)*5 ){ //5-9 用page==2代入
mmm.behaviorListFive.push(n)
}
})
}
})
}
//刷新
this.uploadDiv = false;
this.$nextTick(()=>{
this.uploadDiv = true;
})
},
主要看 方法