element-ui组件扩展--自定义分页组件

element-ui组件扩展–自定义分页组件

*想要封装好一个组件，必须要熟练掌握这三个知识点：
1.父组件传值到子组件（props）
2.子组件传值到父组件（$emit）3.插槽使用（slot）。对于一个独立的组件，props是用来为组件内部注入核心内容；$emit用来使这个组件通过一些操作来融入其它组件中。

1.element-UI安装及引用

根据element-ui的官方文档 官网地址:http://element.eleme.io/#/zh-CN 使用npm或者cnpm(淘宝镜像)执行下面命令即可安装npm install element-ui -S

在main.js中引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 

Vue.use(ElementUI);

new Vue({
el: ‘#app’,
render: h => h(App)
});

2.新建一个Pagination.vue页面

在components文件夹新建一个Pagination.vue页面

/*** 分页组件*/
 <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, jumper" :total="childMsg.total">  </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) {      /**       * 子传父       * 参数1 父元素方法       * 参数2 数据       */      this.pageparm.currentPage = val      this.$emit('callFather', this.pageparm)    }  }}</script>
<style>.page-box {    padding: 20px 0px 50px 0px;    background: #fff;    border-radius: 0px 0px 10px 10px;}</style>

3.分页组件的引入，调用

在需要使用该组件的页面
引入该组件：

import Pagination from '../../../components/Pagination'

调用该组件

<Pagination v-bind:child-msg="pageparm" @callFather="callFather" class="pagtn" ></Pagination>

定义分页参数

  export default {  data() {    
		return {
		  // 分页参数   
		     pageparm: {     
		        currentPage: 1,   
		        pageSize: 10,    
		       total: 10    
		         },
		  }
		}

分页赋值

methods: {
        // 分页插件事件 
        callFather(parm) {     
            this.formInline.current_page = parm.currentPage;   
            this.formInline.page_size = parm.pageSize;         
            //this.getdata(); //数据刷新
             },
           }