vue2中el-pagination的封装

prospect future

已于 2024-05-16 00:17:58 修改

阅读量905

点赞数 9

CC 4.0 BY-SA版权

于 2024-04-26 16:13:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50199737/article/details/138221299

本文详细介绍了如何在Vue项目中使用ElementUI的分页器组件，并进行封装，以便在多个页面复用，同时处理了父子组件之间的数据传递和样式同步问题。作者展示了如何在分页组件中处理每页大小和页码更改，以及如何在父组件控制分页器样式和参数传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element知识复盘，小白封装

不封装直接页面使用时

<el-pagination 
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange" 
    :current-page="currentPage"
    :page-sizes="pageSizes" 
    :page-size="pageSize" 
    :layout="layout" 
    :total="total"    
>
</el-pagination>

data() {
    return {
      currentPage: 1,
      pageSizes: [10, 20, 300, 400],
      pageSize: 10,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 100,
    }
  },
  methods: {
    // 每页条数更改
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1//调整每页数目时，重置当前页，避免当前显示在不存在的页数
      fn()//调接口，更新数据
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      fn()//调接口，更新数据
    }
  }

mixins封装js部分

把通用的js部分封装成mixins并main.js中全局注册时，避免重复js部分；分页器页面中不需要在写js部分，若有相同的内容，mixins内容被覆盖

mixins文件

export default {
  data() {
    return {
      total: 0,//数据总数量
      currentPage: 1,//当前页数
      pageSize: 1,//每页显示个数
      pageSizes: [1, 2, 3, 4],//每页显示个数选择器的选项设置
    }
  },
  methods: {
    //更改每页显示个数
    handleSizeChange(val, func) {
      this.pageSize = val
      this.currentPage = 1//也可通过接口函数传参更改    
      /*
      func(1)，
       
       httpInit(current) {
        if (current) this.current = current
        this.$api.....
      */

      // func为回调再执行一次列表接口
      func()
    },

    //更改当前页
    handleCurrentChange(val, func) {

      this.currentPage = val
      func()
    }
  }
}

.vue页面引入并使用

   <el-pagination
      @size-change="handleSizeChange($event,getCatelist)"
      @current-change="handleCurrentChange($event,getCatelist)"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>


//局部引入
import mixins from "@/utils/mixins";
export default {
  mixins: [mixins],
}

封装.vue组件

1.在分页器样式统一不变的情况下（不用父组件控制分页器的样式）

父组件：需要接口需要的参数（pageSize，currentPage）,子传父（父组件更新total）

子组件：需要接口更新的total，父传子，（分页器更新其他所有参数，父组件需要的参数再通知父组件也更改）

子组件（分页器内容）：


    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="pageSizes" :page-size="pageSize" :layout="layout" :total="total"
    >
    </el-pagination>
 
//html部分和直接页面使用一致

props: {//接收父组件接口更新后的值
       total: {
         type: Number, 
         default: 100

    }},
data() {
    return {//其他参数不变
      currentPage: 1,//----父组件接口需要的数据
      pageSizes: [2, 3, 300, 400],
      pageSize: 10,///---父组件接口需要的数据
      layout: 'total, sizes, prev, pager, next, jumper',
      // total: 100,通过父组件接口更新后传入，props接收
    }
  },
  
  methods: {
    // 每页条数更改
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)//子传父：通知父组件也同步更改，用于更新接口参数，重新发送接口
    //更新分页器的值，重新渲染样式
      this.pageSize = val
      this.currentPage = 1//调整每页数目时，重置当前页，避免当前显示在不存在的页数
    },
    
    // 更改当前页
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)//子传父
     //更新分页器的值，重新渲染样式
      this.currentPage = val

    }
  }

父组件(调用分页器组件)

 //父组件使用（最小力度传值）
  <pagination 
      :total="totals" 
      @handleSizeChange="getParams"
      @handleCurrentChange="getParams1">
  </pagination>


data() {
        return {
            totals: 0,//子组件所需：用于接收接口更新后的值并传给分页器
            paramas: {//父组件接口所用的参数：分页器更新后，使用父传子更新父组件的值（初始值与分页器初始值一致）
                pageSize: 2,
                currentPage: 1,
            },
            tableData: []
        }
    },
    
methods:{
        // 获取接口需要的每页条数参数：父组件更新子组件传入的参数值
        getParams(val) {
            this.paramas.pageSize = val//和分页器同步更改参数值
            this.paramas.currentPage = 1
            console.log('每页条数更改');
            this.getData()//更新接口数据
        },
        // 获取接口需要的页码参数：父组件更新子组件传入的参数值
        getParams1(val) {
            this.paramas.currentPage = val//和分页器同步更改参数值
            console.log('页码更改');
            this.getData()//更新接口数据
        },

        //接口函数
        async getData() {
            let res = await api_usersList({ ...this.paramas })
            this.totals = res.total//父传子数据，更新分页器
            this.tableData = res.data
            console.log('res', res);

        },    
    }

2.子组件分页器的样式要根据父组件传值更改的情况下

分页器的样式根据父组件的传值改变

父组件：需要封装1一样的参数（pageSize，currentPage），用于接口更新参数（父组件控制分页器的所有属性的更改，再通过props分页器自动同步更改）

子组件：需要父组件传入total和一些其他需要更改的值（不需要分页器自己更改数据，都是父组件更改后props传入）

子组件（分页器）


    <el-pagination
         @size-change="handleSizeChange" 
         @current-change="handleCurrentChange" 
         :current-page="currentPage"
         :page-sizes="pageSizes" 
         :page-size="pageSize" 
         :layout="layout" 
         :total="total"
     >
    </el-pagination>
   //html部分依旧保持与直接使用不变


 //data中的值全部改成父传子接收，不传值的时候使用default的值
   props: {
    currentPage: {
      type: Number, default: 1
    },
    pageSizes: {
      type: Array, default: () => [10, 20, 30, 40]
    },
    pageSize: {
      type: Number, default: 10

    },
    total: {
      type: Number, default: 100

    },
    layout: {
      type: String, default: 'total, sizes, prev, pager, next, jumper'

    },}
    
    methods: {
    // 每页条数更改
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)//通知父组件更改数据，更改后用父传子同步更新子组件

      // 数据是父传子时，更改数据只能是父组件修改，父组件更改后用父传子同步更新子组件，不需要子组件再更新一次
      // this.pageSize = val
      // this.currentPage = 1//调整每页数目时，重置当前页，避免当前显示在不存在的页数
    },
    
    // 更改当前页
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)//同上一个函数

      // this.currentPage = val

    }
  }

父组件

//绑定需要更改的部分
<Pagination 
    :currentPage="currentPage" 
    :pageSize="pageSize" 
    :total="total"
     @handleCurrentChange="handleCurrentChange" 
     @handleSizeChange="handleSizeChange">
</Pagination>

 data() {
        return {
            pageSize: 10,
            currentPage: 1,
            total: 0,
            }
      }

methods: {
        // 每页条数更改
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1

            this.getData()//更新页面
        },
        // 更改当前页
        handleCurrentChange(val) {
            this.currentPage = val

            this.getData()//更新页面
        },
}
mixins.js封装分页器的

暂时小白技术只能封装这几种，具体使用哪种可以根据具体情况而定，虽然感觉封装了也没方便多少，但起码能稍微简练一下页面结构。记录一下。