element分页功能再vue中使用（绝对）

        其中我们使用没办法适用到视图中，这时我们其实需要使用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>

标签：vue,分页,pagesize,element,item,组件,currentPage,第几页,page
来源： https://blog.csdn.net/qq_35191845/article/details/122311202