表格分页设置

src/benyun/components/byTable/byTable.vue

@@ -1,61 +1,75 @@
 <template>
-  <vxe-table
-    ref="table"
-    :data="value"
-    row-id="key_Id"
-    :size="attrs.size"
-    resizable
-    :height="attrs.height"
-    :max-height="attrs.maxHeight"
-    :stripe="attrs.stripe"
-    :border="attrs.border"
-    :align="attrs.align"
-    :tree-config="{transform: attrs.transform, rowField: attrs.rowField, parentField: attrs.parentField}"
-    :row-config="{isHover: true}"
-    style="width: 100%">
-
-    <vxe-column v-if="attrs.checkbox" type="checkbox" width="50" fixed="left" />
-    <vxe-column v-if="attrs.radio" type="radio" width="50" fixed="left" />
-    <vxe-column v-if="attrs.seq" type="seq" title="序号" :width="attrs.seqWidth?attrs.seqWidth:50" fixed="left" :tree-node="attrs.treeNodeSeq" />
-    <template v-for="(item,index) in columns">
-      <vxe-column
-        v-if="item.action"
-        :key="index"
-        :title="item.title"
-        :width="item.width"
-        fixed="right"
-      >
-        <template #default="{ row }">
-          <template v-if="item.plugins">
-            <span class="col-action" 
-              v-for="(pluginsItem,_index) of item.plugins" 
-              :key="'plu'+_index" 
-              v-hasPermi="[item.audit]" 
-              @click="pluginClick(pluginsItem,row)">
-              <i v-if="pluginsItem.icon" :class="pluginsItem.icon" ></i>
-              {{ pluginsItem.name }}
-            </span>
+  <div class="by-table">
+    <vxe-table
+      ref="table"
+      :data="value"
+      row-id="key_Id"
+      :size="attrs.size"
+      resizable
+      :height="attrs.height"
+      :max-height="attrs.maxHeight"
+      :stripe="attrs.stripe"
+      :border="attrs.border"
+      :align="attrs.align"
+      :tree-config="{transform: attrs.transform, rowField: attrs.rowField, parentField: attrs.parentField}"
+      :row-config="{isHover: true}"
+      style="width: 100%">
+
+      <vxe-column v-if="attrs.checkbox" type="checkbox" width="50" fixed="left" />
+      <vxe-column v-if="attrs.radio" type="radio" width="50" fixed="left" />
+      <vxe-column v-if="attrs.seq" type="seq" title="序号" :width="attrs.seqWidth?attrs.seqWidth:50" fixed="left" :tree-node="attrs.treeNodeSeq" />
+      <template v-for="(item,index) in columns">
+        <vxe-column
+          v-if="item.action"
+          :key="index"
+          :title="item.title"
+          :width="item.width"
+          fixed="right"
+        >
+          <template #default="{ row }">
+            <template v-if="item.plugins">
+              <span class="col-action" 
+                v-for="(pluginsItem,_index) of item.plugins" 
+                :key="'plu'+_index" 
+                v-hasPermi="[item.audit]" 
+                @click="pluginClick(pluginsItem,row)">
+                <i v-if="pluginsItem.icon" :class="pluginsItem.icon" ></i>
+                {{ pluginsItem.name }}
+              </span>
+            </template>
           </template>
+        </vxe-column>
+        <vxe-column
+          v-if="!item.action"
+          :key="index"
+          :field="item.field"
+          :title="item.title"
+          :width="item.width"
+          :fixed="item.fixed"
+          :align="item.align"
+          :tree-node="item.treeNode"
+        >
+        <template #default="{ row }">
+          <slot v-if="item.slot" :name='item.field' :row='row'></slot>
+          <span v-else>{{ row[item.field] }}</span>
         </template>
-      </vxe-column>
-      <vxe-column
-        v-if="!item.action"
-        :key="index"
-        :field="item.field"
-        :title="item.title"
-        :width="item.width"
-        :fixed="item.fixed"
-        :align="item.align"
-        :tree-node="item.treeNode"
-      >
-      <template #default="{ row }">
-        <slot v-if="item.slot" :name='item.field' :row='row'></slot>
-        <span v-else>{{ row[item.field] }}</span>
-      </template>
-      
-      </vxe-column>
-  </template>
-  </vxe-table>
+        
+        </vxe-column>
+    </template>
+    </vxe-table>
+    <div class="page">
+      <el-pagination
+        v-if="page.total > 0"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="page.pageNo"
+        :page-sizes="attrs.pageSizes"
+        :page-size="attrs.pageSize?attrs.pageSize:20"
+        :layout="attrs.layoutPage?attrs.layoutPage:'total, sizes, prev, pager, next, jumper'"
+        :total="page.total">
+      </el-pagination>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -75,7 +89,9 @@
       transform: true/false  //开启自动将列表转成树结构
       rowField:''  row对应id
       parentField:''  row父id
-      
+      pageSize:''  //分页条数
+      pageSizes:[]  //每页显示个数选择器的选项设置
+      layoutPage:''  //分页组件布局
     },
     columns:[{
       title:''  //标题
@@ -93,9 +109,20 @@
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import VueViews from '@/benyun/utils/VueViews'
 
+interface Page{
+  pageNo:number,
+  pageSize:number,
+  total:number
+}
+
 @Component
 export default class ByTable extends VueViews {
   value:Array<any>=[];
+  page = {
+    pageNo: 1,
+    pageSize: 20,
+    total: 0
+  }
 
   get columns(){
     return this.config?.columns ? this.config.columns : [];
@@ -105,7 +132,6 @@ export default class ByTable extends VueViews {
     if(this.propConfig){
       this.setConfig(this.propConfig)
     }
-    console.log('aaaaa',this.config)
   }
   mounted(){
     this.$nextTick(()=>{
@@ -115,6 +141,26 @@ export default class ByTable extends VueViews {
     })
   }
 
+  //设置分页
+  setPage(page:Page){
+    this.page.pageNo = page.pageNo;
+    this.page.pageSize = page.pageSize;
+    this.page.total = page.total;
+  }
+
+  //每页条数发生变化
+  handleSizeChange(val:number) {
+    if (this.page.pageSize * val > this.page.total) {
+      this.page.pageNo = 1
+    }
+    this.$emit('pagination',{pageNum:this.page.pageNo,pageSize:this.page.pageSize})
+  }
+  //当前页发生变化
+  handleCurrentChange(val:number) {
+    this.page.pageNo = val;
+    this.$emit('pagination',{pageNum:this.page.pageNo,pageSize:this.page.pageSize})
+  }
+
   //操作列点击操作
   pluginClick(config:any,row:any){
     if(config?.event?.click){
@@ -123,7 +169,7 @@ export default class ByTable extends VueViews {
     }
   }
 
-  //获取表格选中数据
+  //获取表格选中的数据
   getSelectData() {
     let data: Array<any> = []
     if (this.$refs.table) {
@@ -171,6 +217,15 @@ export default class ByTable extends VueViews {
 </script>
 
 <style lang="scss" scoped>
+.by-table{
+  width: 100%;
+  .page{
+    width: 100%;
+    display: flex;
+    padding-top: 16px;
+    justify-content: flex-end;
+  }
+}
 .col-action{
   color: #0089ff;
   cursor: pointer;

src/benyun/plugins/componentRegister.ts

@@ -1,8 +1,8 @@
-interface comBase {
+interface ComBase {
   name: string;
   component: Function;
 }
-const comps: Array<comBase> = [
+const comps: Array<ComBase> = [
   {
     name: "byForm",
     component: () => import("@/benyun/components/byForm/byForm.vue"),

src/views/demo/table.vue

@@ -47,6 +47,7 @@ export default class DemoTable extends Vue {
       plugins:[{
         icon:'el-icon-edit',
         name:'编辑',
+        audit:'',
         event:{
           click:(item:any) => {
             console.log('该行数据：',item)