其中我们使用没办法适用到视图中,这时我们其实需要使用slice来截取数组
<table>
<tr>
<th @click="idsort">ID <i class="el-icon-sort"></i></th>
<th>商品名</th>
<th @click="pricesort">价格<i class="el-icon-sort"></i></th>
</tr>
//这个slice后面跟的数据是通过数组的截取
//当前第几页(currentPage)-1 *每页显示几条(pagesize),currentPage*pagesize
//把相应的数带入可计算出
//-1是为了让他们永远有一个差值,意思就是取一页的数据。
<tr v-for="(item,index) in searchold.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.price}}</td>
</tr>
</table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[1, 2, 5, 10]"
:page-size="pagesize"
layout="sizes, prev, pager, next"
:total="goodsData.length">
</el-pagination>
</div>
<script>
export default {
props:[],
data(){
return{
goodsData:[
],
title:'',
searchold:[],
allpage:'',
currentPage:1,
pagesize:1,
}
methods: {
//方法
handleSizeChange(e){
this.pagesize=e
//这是从子组件中传过来的事件e是一页显示多少条数据
},
handleCurrentChange(e){
this.currentPage=e
//这是从子组件中传过来的事件e是当前是第几页
}
},
components:{
//注册子组件
},
<el-pagination
@size-change="handleSizeChange" **选择的第几页
@current-change="handleCurrentChange" **选择的一页多少条
:current-page.sync="currentPage" 当前页码
:page-sizes="[1, 2, 5, 10]" 条数选择项
:page-size="pagesize" 每页多少条
layout="sizes, prev, pager, next"
:total="totols" 总条数>
</el-pagination>