分页功能（板子）

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

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

 分页功能，可以放在component中

myPagination.vue

<template>
   <div style="text-align:center ;margin:20px">
    <el-pagination background layout="total,prev, pager, next,jumper" 
    :total='total' :page-size='pageSize' @current-change="changePage">
</el-pagination>
<!--注意这个current-change是element分页组件的自定义事件，它含有一个回调参数，参数为当前页  -->
   </div>
</template>

<script>
export default {
  name: 'MyPagination',
  components: {},
  props:{
    total:{
        typeof:Number,
        default:100
    },
    pageSize:{
        typeof:Number,
        default:10
    }

  },
  data () {
    return {}
  },
  methods:{
    changePage(page){
        this.$emit('changePage',page)
    }
  }
}
</script>

<style>
</style>
 

表格页面

<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>