element-ui組件擴展--自定義分頁組件

作者:mandy

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(); //數據刷新
             },
           }