packages/agTable/src/index.vue

@@ -1,42 +1,66 @@
 <template>
-    <el-table v-bind="$attrs" v-on="$listeners" :data="data">  
-     <el-table-column v-for="item,index in columns" :key="index" v-bind="item">    
-            <template slot-scope="scope"> 
-              <div  v-if="item.soltName">  
-              <slot :name="item.soltName" :row="scope.row" >  
-              </slot> 
-            </div> 
-            <div v-else>  
-              {{scope.row[item.prop]}} 
-              </div>
-            </template>
-          
-     </el-table-column>
-    </el-table>
+   <div class="agtablebox">
+    <el-table v-bind="$attrs" v-on="$listeners" :data="data" size="small">  
+      <el-table-column v-for="item,index in columns" :key="index" v-bind="item">    
+             <template slot-scope="scope"> 
+               <div  v-if="item.soltName">  
+               <slot :name="item.soltName" :row="scope.row" >  
+               </slot> 
+             </div> 
+             <div v-else>  
+               {{scope.row[item.prop]}} 
+               </div>
+             </template>
+           
+      </el-table-column>
+     </el-table>
+     <div class="agtablefooter">
+      <el-pagination 
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage"
+      :page-sizes="pageSizes||[10,100,200,500]"
+      :page-size="pageSize" 
+      layout="sizes,prev, pager, next, jumper"
+      :total="total">
+   </el-pagination>
+     </div>
+   </div>
   </template>
   
   <script>  
 
   export default {
-    name: "agTable",
-    components: { 
-
-    },
-    props:["columns","data"],
+    name: "agTable", 
+    props:["columns","data",'pageSize','currentPage','total','pageSizes'],
     data() {
-      return {
-        width: "160px",
-     
+      return { 
       };
     }, 
     mounted() {
       
     },
-    methods: {},
+    methods: {
+      handleSizeChange(e){ 
+        this.$emit('onSizeChange',e);
+      },
+      handleCurrentChange(e){ 
+        this.$emit('onCurrentChange',e);
+      }
+    },
   };
   </script>
   
   <style lang="scss" scoped>
+  .agtablebox{
+    background: #fff;
+    width: 100%;
+    .agtablefooter{
+      display: flex;
+      justify-content: flex-end;
+      padding:12px;
+    }
+  }
   ::v-deep {
     .el-table {
       width: 100%;

packages/agUpload/index.js

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

packages/agUpload/src/index.vue

@@ -0,0 +1,64 @@
+<template>
+   <div>
+        <el-upload 
+        action=""
+        list-type="picture-card" 
+        v-bind="$attrs"
+        v-on="$listeners"
+        :on-preview="handlePictureCardPreview"
+        :on-remove="handleRemove"
+        :file-list="fileList"
+        @change="onUpdate"
+        ref="agupdateref"
+        >
+    <i class="el-icon-plus"></i>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+    <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+
+   </div>
+  </template>
+  
+  <script>  
+
+  export default {
+    name: "agUpdate", 
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false,
+        fileList:[]
+      };
+    }, 
+    mounted() {
+        console.log(this.$refs.agupdateref,'this.$refs.agupdateref');
+        
+     let input=this.$refs.agupdateref.vnode;
+     console.log(input,'input');
+     
+    },
+    methods: {
+        handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      onUpdate(e){
+        console.log(e,"ee");
+        
+      }
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  ::v-deep {
+    .el-table {
+      width: 100%;
+    }
+  }
+  </style>
+  

packages/index.js

@@ -1,13 +1,15 @@
 	// 导入组件
-  import agInput from './agInput/index'
-  import agSelect from './agSelect/index'
+  import agInput from './agInput/index';
+  import agSelect from './agSelect/index';
+  import agUpdate from './agUpload';
  
   // 注册组件
  
   // 组件列表
   const components = [
     agInput,
-    agSelect
+    agSelect,
+    agUpdate
   ]
   
   // 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
@@ -30,5 +32,6 @@
   export {
     // 以下是具体的组件列表
     agInput,
-    agSelect
+    agSelect,
+    agUpdate
   }

src/App.vue

@@ -39,7 +39,7 @@
     >
     </ag-MultifunctionSearch>
   <agQuery :inputs="inputs" @onSearch="onSearch"/>
-    <agTable :columns="columns" :data="tabledata" >
+    <agTable :columns="columns" :data="tabledata" :currentPage="2" :pageSize="100" :total="500">
       <template #name="{row}">
        <div>{{row.name}}11</div>
       </template> 
@@ -47,6 +47,9 @@
         <div>{{row.date}} </div>
        </template> 
     </agTable>
+    <agUpdate>
+
+    </agUpdate>
     <!-- <el-input
       size="small"
       placeholder="请输入内容"
@@ -75,8 +78,10 @@ import agCascadeOptional from "../packages/agCascadeOptional/src/index.vue";
 import agMultifunctionSearch from "../packages/agMultifunctionSearch/src/index.vue";
 import agQuery from "../packages/agQuery/src/index.vue";
 import agTable from "../packages/agTable/src/index.vue";
+import agElemUI from "../packages/index.js";
 
 Vue.use(ElementUI);
+Vue.use(agElemUI);
 
 export default {