vue实现自定义分页功能组件，不是element自带ui，实现组件复用

最新推荐文章于 2024-06-19 10:54:10 发布

吴老弟i

最新推荐文章于 2024-06-19 10:54:10 发布

阅读量444

点赞数

分类专栏： vue的PC开发文章标签： vue

本文链接：https://blog.csdn.net/wuxiaoqing_818/article/details/106836745

版权

本文介绍如何在Vue中创建一个自定义分页组件，不依赖Element UI，实现组件的复用。父组件通过传入后台返回的列表数据`tab_data`给分页组件，简单易用。

摘要由CSDN通过智能技术生成

父组件：（引入封装的分页组件）
template部分：

  <!-- 分页 -->
<paging
  :tableData="tab_data"
  @pageChange="pageChange"
  @pageChangeSize="pageChangeSize"
></paging>

tab_data就是传递的后台返回的列表数据，传递给分页组件
父组件正常引入即可，注册

methods部分：

 //分页开始了
    // 页码切换
    pageChange(item) {
   
      console.log(item)
      //调用方法更新页面数据
    },
    //  一页多少条数据
    pageChangeSize(item) {
   
      console.log(item)
      //调用方法更新数据
    }

子组件：
template部分：

<div class="paging">
  <span>共 30 条</span>
  <select name="" id="" v-model="pag_size" @change="getSelected">
    <option v-for="item in pag_options" :key="item" :value="item">{
   {
   item}}</option>
  </select>
  <button @click="goFirstPage()">首页</button>
  <i class="el-icon-arrow-left" @click="goUpPage()"></i>
  <i class="el-icon-arrow-right" @click="goNextPage()"></i>
  <button @click="goLastPage()">尾页</button>
  <label for="">前往<input type="text" v-model="page" @keydown.enter="goPage()">页</label>
</div>

****重点部分：****

<script>
export default {
   
  props: ['tableData'],
  created() {
   
    console.log(this.tableData)
  },
  mounted() {
   
  },
  data() {
   
    return