分页功能（板子）

 分页功能实现，将myPagination.vue作为子组件引入到表格组件中，

在父组件引入myPagination.vue时绑定变量和方法:total="total" :pageSize="pageSize" @changePage='changePage'    红色的是父传子，给分页组件传入最初的变量，红色的是子传父，通过点击分页中改变父组件table的页面显示

 分页功能，可以放在component中

myPagination.vue

 

表格页面

<template>
  <div class="goods">
    
    <div class="header">
      <el-input  v-model="input" placeholder="请输入内容">el-input>
      <el-button type="primary">查询el-button>
      <el-button type="primary">添加el-button>
    div>
    
    <div class="wrapper">
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column type="selection" width="55">
    el-table-column>
      <el-table-column prop="id" label="商品ID" width="100px">
      el-table-column>
      <el-table-column prop="title" label="商品名称" width="100px" show-overflow-tooltip>
      el-table-column>
      <el-table-column width="100px" prop="price" label="商品价格">
      el-table-column>
      <el-table-column width="100px"  prop="num"  label="商品数量">
      el-table-column>
      <el-table-column
      width="120px"  prop="category"   label="规格类目">
      el-table-column>
      <el-table-column  prop="image"  label="商品图片" show-overflow-tooltip>
      el-table-column>
      <el-table-column  prop="sellPoint"  label="商品买点" show-overflow-tooltip>
      el-table-column>
      <el-table-column prop="descs"  label="商品描述" show-overflow-tooltip>
      el-table-column>
     
       <el-table-column label="操作" show-overflow-tooltip>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除el-button>
      template>
    el-table-column>
    el-table>
    div>
    
   
      <MyPagination :total="total" :pageSize="pageSize" @changePage='changePage'/>
   
    
  div>
template>
 
<script>
// import axios from 'axios'
import MyPagination from '@/components/MyPagination.vue';
export default {
  name: 'GooDs',
  data() {
    return {
      input: '',
      tableData:[],
      total:10,
      pageSize:1
    }
  },
  components: { MyPagination },
  methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      //获取商品信息
     getInfo(page){
 
        this.$api.getGoodsList({
        page:page
      }).then(res=>{
        console.log(res.data)
        if(res.data.status===200){
            this.tableData=res.data.data
            
            this.pageSize=res.data.pageSize
            this.total=res.data.total
        }
      })
      },
      // 页面改变
      changePage(num){
        this.getInfo(num)
      }
    },
    created(){
      this.getInfo(1)
        // axios.get('http://localhost:3001/api/projectList?page=1').then(res => {
        //   console.log(res);
        // })
      
    }
}
script>
 
<style lang="less" scoped >
.goods {
  margin: 20px;
}
 
.header {
  height: 60px;
 display: flex;
 
  button {
    height: 40px;
    margin-left: 20px;
  }
 margin: 20px,0;
}
.wrapper{
  display: block;
    margin:20px,0;
  }
style>