分页

examples/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from '../src/App.vue'
 
 //基于element组件封装，引入element组件库
-import { Input, Select, Option, OptionGroup, DatePicker ,Tabs,TabPane} from 'element-ui';
+import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(Input);
 Vue.use(Select);
@@ -11,6 +11,7 @@ Vue.use(Option);
 Vue.use(DatePicker);
 Vue.use(Tabs);
 Vue.use(TabPane);
+Vue.use(Pagination)
 
 // 导入组件库
 import erp_element_ui from '../packages'

packages/agPagination/index.js

@@ -0,0 +1,9 @@
+import agPagination from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agPagination.install = function (Vue) {
+    Vue.component(agPagination.name, agPagination)
+}
+
+// 导出组件
+export default agPagination

packages/agPagination/src/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-pagination class="ag-pagination" v-bind="attrs" v-on="$listeners">
+  </el-pagination>
+</template>  
+<script>
+export default {
+  name: "agPagination",
+  props: {
+    tabsData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    attrs() {
+      return {
+        total: 0,
+        "page-size": 20,
+        "current-page": 1,
+        "page-sizes": [20, 50, 100, 200],
+        layout: "total, sizes, prev, pager, next, jumper",
+        ...this.$attrs,
+      };
+    },
+  },
+  methods: {},
+};
+</script>  
+  
+<style scoped lang="scss">
+</style>

src/App.vue

@@ -1,17 +1,11 @@
 <template>
   <div>
-    <agTabs
-      ref="ref_Pedestal"
-      v-model="value"
-      :before-leave="handleClick"
-      :tabsData="tabsData"
-    >
-    </agTabs>
+    <agTabs ref="ref_Pedestal"> </agTabs>
   </div>
 </template>
 
 <script>
-import agTabs from "../packages/agTabs/src/index.vue";
+import agTabs from "../packages/agPagination/src/index.vue";
 export default {
   components: { agTabs },
   data() {
@@ -150,6 +144,8 @@ export default {
     handleClick() {
       console.log(1111);
     },
+    handleSizeChange() {},
+    handleCurrentChange() {},
   },
 };
 </script>