vue---分页搜索功能

<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">&laquo;</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">&raquo;</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>