vue2中el-pagination的封装

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

 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封装分页器的

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

  • 9
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值