fix: 表格demo修改

src/views/table-demo/components/DemoBaseModal.vue

@@ -57,6 +57,5 @@
 <style lang="scss" scoped>
 .content {
   width: 100%;
-  height: 900px;
 }
 </style>

src/views/table-demo/components/DemoTableSelectorModal.vue

@@ -40,6 +40,7 @@
             },
           },
         ],
+        rowKey: 'id',
         data: [
           {
             id: 1,
@@ -72,14 +73,18 @@
           };
         }),
       },
-      pagerConfig: {
-        enable: true,
-        pageSize: 10,
-        pageNum: 1,
-      },
       toolbarConfig: {
         enable: false,
       },
+      async request() {
+        return {
+          list: Array.from({length: 30}).fill(0).map((v, idx) => ({
+            id: idx,
+           name: idx
+          })),
+          total: 100
+        }
+      },
       // 每次查询接口之前，都会调用这个回调函数
       tableSearchBeforeBiz() {
         console.log("表格搜索前");

src/views/table-demo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="table-demo">
+  <BsPageWrapper>
     <bs-table v-bind="tableOptions">
       <template #searchRight>
         <a-space>
@@ -38,11 +38,10 @@
         <a-button type="primary" :disabled="true" size="small">编辑</a-button>
       </template>
     </bs-table>
-
     <add-or-edit-drawer ref="addOrEditDrawerRef" />
     <demo-table-selector-modal ref="demoTableSelectorModal" />
     <demo-base-modal ref="demoBaseModal" />
-  </div>
+  </BsPageWrapper>
 </template>
 
 <script setup lang="jsx">
@@ -52,9 +51,10 @@
   import DemoTableSelectorModal from '/@/views/table-demo/components/DemoTableSelectorModal.vue';
   import DemoBaseModal from '/@/views/table-demo/components/DemoBaseModal.vue';
   import { message } from 'ant-design-vue';
-  import {BorderOuterOutlined, SearchOutlined} from '@ant-design/icons-vue';
+  import { BorderOuterOutlined, SearchOutlined } from '@ant-design/icons-vue';
   import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
   import { isFunction } from 'lodash';
+  import { BsPageWrapper } from '/@/components/BsUi';
 
   const addOrEditDrawerRef = ref(null);
   const demoTableSelectorModal = ref(null);
@@ -127,6 +127,7 @@
       },
       gridOptions: {
         loading: false,
+        height: '100%',
         columns: [
           {
             type: 'seq',
@@ -159,16 +160,16 @@
             slots: {
               default({ row, column }) {
                 return (
-                    <a-button
-                        type='text'
-                        size='small'
-                        disabled={false}
-                        onClick={() => {
-                          handleEdit(row);
-                        }}
-                    >
-                      编辑
-                    </a-button>
+                  <a-button
+                    type='text'
+                    size='small'
+                    disabled={false}
+                    onClick={() => {
+                      handleEdit(row);
+                    }}
+                  >
+                    编辑
+                  </a-button>
                 );
               },
             },
@@ -208,8 +209,8 @@
                       return false;
                     },
                     onClick({ row }) {
-                      console.log("row", row);
-                      message.success( row.name)
+                      console.log('row', row);
+                      message.success(row.name);
                     },
                     extraProps: {},
                   },
@@ -224,7 +225,7 @@
                     },
                     onClick({ row }) {},
                     extraProps: {
-                      icon: h(BorderOuterOutlined)
+                      icon: h(BorderOuterOutlined),
                     },
                   },
                   {
@@ -284,35 +285,34 @@
           };
         }),
       },
-      pagerConfig: {
-        enable: true,
-        pageSize: 10,
-        pageNum: 1,
-      },
       toolbarConfig: {
         displayToolbar: DISPLAY_STATE.VISIBLE,
-        leftButtons: [{
-          code: 'btn1',
-          title: '左侧按钮',
-          props: {
-            type: 'info',
-            disabled: false,
-            onClick(event) {
-              message.success('ok');
+        leftButtons: [
+          {
+            code: 'btn1',
+            title: '左侧按钮',
+            props: {
+              type: 'info',
+              disabled: false,
+              onClick(event) {
+                message.success('ok');
+              },
             },
           },
-        }],
-        rightButtons: [{
-          code: 'btn1',
-          title: '右侧按钮',
-          props: {
-            type: 'info',
-            disabled: false,
-            onClick(event) {
-              message.success('ok');
+        ],
+        rightButtons: [
+          {
+            code: 'btn1',
+            title: '右侧按钮',
+            props: {
+              type: 'info',
+              disabled: false,
+              onClick(event) {
+                message.success('ok');
+              },
             },
           },
-        }]
+        ],
       },
       // 每次查询接口之前，都会调用这个回调函数
       tableSearchBeforeBiz() {
@@ -325,16 +325,22 @@
       },
       // 表格初始化完成,只加载一次
       mounted(gridRef) {
-        console.log('表格加载后', gridRef, getValue("pagerConfig.total"));
+        console.log('表格加载后', gridRef, getValue('pagerConfig.total'));
+      },
+
+      tableSearchAfterBiz({gridRef}) {
+        console.log('表格搜索后', gridRef, getValue('pagerConfig.total'));
       },
 
       async request(params) {
         console.log('params');
         return {
-          list: Array.from({length: 50}).fill(1).map((v, index) => ({id: index})),
-          total: 50
-        }
-      }
+          list: Array.from({ length: 50 })
+            .fill(1)
+            .map((v, index) => ({ id: index })),
+          total: 50,
+        };
+      },
     },
   });