<template>
<div>
<div class="searc">
<input type="search" placeholder="请输入搜索关键字" v-model='msg' v-on:keyup='fileterImg'>
</div>
<table class="table">
<tr>
<th>ID</th>
<th>音乐标题</th>
<th>音乐时间</th>
<th>音乐类型</th>
<th>作者</th>
<th>上传人</th>
<th>审核状态</th>
<th>操作</th>
</tr>
<tr v-for='item in list' :id='item.id'>
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.times}}</td>
<td>{{item.kinds}}</td>
<td>{{item.author}}</td>
<td>{{item.men}}</td>
<td>{{item.look}}</td>
<td>{{item.id}}</td>
</tr>
</table>
<div class="pages">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="javascript:;" aria-label="Previous" v-if='num>1' @click='num=1,pageClick()'>
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for='(item,index) in page'><a href="javascript:;" @click='num=index+1,pageClick(index)'>{{item}}</a></li>
<li>
<a href="javascript:;" aria-label="Next" v-if='num!=page' @click='num++,pageClick()'>
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</template> <script>
export default {
name: 'hello',
data () {
return {
dataList:[],//总数据
page:'',//总页数
list:[],//循环数据
num:1,//默认第一页
pageNum:8,//每页显示多少
msg:''
}
},
mounted(){
var _this = this
this.$http.get('.././static/list.json').then(function(res){
_this.dataList = res.data.list
_this.list = _this.dataList.filter(function(data,index){
if(index>=(_this.num-1)*_this.pageNum&&index<_this.pageNum*_this.num){
return data;
}
})
_this.page =Math.ceil(_this.dataList.length/8);
})
},
methods:{
pageClick(index){
var _this = this;
if(index!=this.num){
this.list = this.dataList.filter(function(data,index){
if((parseInt(index/_this.pageNum)+1) == _this.num){
return data
}
})
}
},
fileterImg(){
var _this = this;
this.list = this.dataList.filter(function(data,index){
if(data.title.indexOf(_this.msg)!==-1){
return data;
}
})
_this.page = Math.ceil(_this.list.length/8)
}
}
}
</script>
<style scope>
td{
text-align: left;
border-bottom: 1px solid #ddd;
height: 45px;
}
</style>
改进版。分页+搜索功能
<template>
<div>
<div class="search-box">
<input type="text" placeholder="请输入搜索信息" v-model='query'>
</div>
<div class="table">
<table>
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>缩略图</th>
</tr>
<tr v-for="item in showLists">
<td>{{item.name}}</td>
<td>{{item.format}}</td>
<td>{{item.number}}</td>
<td><img :src="item.img" alt="img"></td>
</tr>
</table>
<h4 v-if="showText">暂无这信息</h4>
</div>
<div class="pages">
<ul>
<li class="page-btn" @click="changePage(-1)">上一页</li>
<li>第<input type="text" v-model="showPage">页</li>
<li>总共{{totalPage}}页</li>
<li class="page-btn" @click="changePage(1)">下一页</li>
</ul>
</div>
</div>
</template>
<script>
require('es6-promise').polyfill();
require('isomorphic-fetch');
export default{
name:'table',
data(){
return{
arrList:[],
totalPage:0,
limitPage:8,
showPage:1,
showList:[],
filterList:[],
query:'',
showText:false
}
},
mounted(){
this.$nextTick(()=>{
this.getList();
})
},
computed:{
showLists(){
this.getShowList();
this.listFilter();
return this.showList;
}
},
methods:{
getList(){
fetch('./static/list.json').then((res)=>{
return res.json()
}).then((stroies)=>{
this.arrList = stroies.list;
/*this.showList = this.arrList.filter((item,index)=>{
if(index<this.limitPage*this.showPage && index>=this.limitPage*(this.showPage-1)){
return item;
}
})*/
this.getShowList();
})
},
getShowList(){
this.showList = this.arrList.slice((this.showPage-1)*this.limitPage,this.showPage*this.limitPage)
this.totalPage = Math.ceil(this.arrList.length/this.limitPage)
},
changePage(num){
if(num === 1){
this.showPage++;
if(this.showPage>this.totalPage){
this.showPage = this.totalPage;
console.log('last')
}
}else if(num === -1){
this.showPage--;
if(this.showPage<=1){
this.showPage = 1;
console.log('first')
}
}
this.getShowList()
},
listFilter(){
if(this.query){
this.filterList = this.arrList.filter((item)=>{
return item.name.indexOf(this.query)>-1
})
if(this.filterList.length===0){
this.showText = true;
}
this.showList = this.filterList.slice((this.showPage-1)*this.limitPage,this.showPage*this.limitPage)
this.totalPage = Math.ceil(this.filterList.length/this.limitPage)
}else{
this.showText = false;
}
}
},
watch:{
query(){
console.log(this.query)
}
}
}
</script>