封装分页组件(Pagination)v2版本

使用须知:基于项目内已安装vue2+eleme-ui, 则可以百分百直接套用,使用简介明了!!

一、封装component组件

  • component/Pagination/index.js
</** * 分页组件 */
<template>
  <el-pagination
    class="page-box"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    background
    :current-page="childMsg.currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="childMsg.pageSize"
    layout="total, sizes, prev, pager, next"
    :total="childMsg.total"
  >
    <!-- layout="total, sizes, prev, pager, next, jumper" -->
  </el-pagination>
</template>
<script>
export default {
  name: "Pagination",
  props: ["childMsg"],
  data() {
    return {
      pageparm: {
        currentPage: this.childMsg.currentPage,
        pageSize: this.childMsg.pageSize,
      },
    };
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      /**
       * 子传父
       * 参数1 父元素方法
       * 参数2 数据
       */
      this.pageparm.pageSize = val;
      this.$emit("callFather", this.pageparm);
    },
    handleCurrentChange(val) {
      console.log(val);
      /**
       * 子传父
       * 参数1 父元素方法
       * 参数2 数据
       */
      this.pageparm.currentPage = val;
      this.$emit("callFather", this.pageparm);
    },
  },
};
</script>

<style>
.page-box {
  margin: 10px auto;
}
</style>

二、调用封装的组件

引入、注册、调用方式

// 分页参数配置

pageParam: {

   currentPage: 1, // 当前页码,默认为第1页

   pageSize: 10, // 每页显示的数据条数,默认为10条

   total: 10, // 数据总条数,用于计算总页数

},

// 分页插件事件
callFather(parm) { }

<template>
	<div>
		<!-- 分页组件 -->
		<Pagination v-bind:child-msg="pageparm" @callFather="callFather" v-bind:total="pageparm.total"></Pagination>
	</div>
</template>
import Pagination from '@/layout/component/Pagination'; //引入
<script>
export default {
	name: 'demo',
    components: {
		Pagination, //注册
	},
	data() {
		return {
			pageparm: {
				currentPage: 1,
				pageSize: 10,
				total: 10,
			},
                
		};
	},
    methods(){
       // 分页插件事件
		callFather(parm) { }
   }
};
</script>

三、分页图效果展示

感谢您的阅读,如有帮到您,可以给文章点个赞! 

猜你喜欢

转载自blog.csdn.net/m0_71071209/article/details/140646408