+

packages/screen/src/views/ServiceStationManagePage/index.vue

@@ -4,16 +4,16 @@
     :columns="columns"
     :toolbar="toolbar"
     :autoHeight="true"
-    :pagination="true"
+    :pagination="pagination"
   ></DynamicTable>
 </template>
   
 <script lang="ts" setup>
 import DynamicTable from "../../component/DynamicTable";
-import { h, onMounted } from "vue";
+import { h, ref, onMounted, reactive } from "vue";
 import { request } from "@/utils/request";
 
-const tableData = [
+const tableData = ref([
   {
     county: "潼南",
     road_code: "G319线",
@@ -114,16 +114,20 @@ const tableData = [
     name: "三汇停车区",
     service_station_address: "交通公路部门",
   },
-];
+]);
+
 const getTableData = async () => {
   try {
-    const params = {};
+    const params = {
+
+        pageNum: pagination.current,
+        pageSize: pagination.pageSize,
+    };
     const res = await request({
-      url: "/api/asdsad/asdasd",
+      url: "/api/yhz/list",
       method: "GET",
       params: params,
     });
-    
   } catch (error) {}
 };
 onMounted(() => {
@@ -167,18 +171,32 @@ const columns = [
     label: "操作",
     fixed: "right",
     width: 100,
-    render: (row) => () => h(
-      ElButton,
-      {
-        type: "text",
-        onClick: () => {
-          console.log(row);
+    render: (row) => () =>
+      h(
+        ElButton,
+        {
+          type: "text",
+          onClick: () => {
+            console.log(row);
+          },
         },
-      },
-      () => "详情"
-    ),
+        () => "详情"
+      ),
   },
 ];
+
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  pageSizes: [10, 20, 50],
+  layout: "prev, pager, next, jumper",
+  onChange: (page: number, pageSize: number) => {
+    pagination.current = page;
+    pagination.pageSize = pageSize;
+    getTableData(); 
+  },
+});
 </script>
   
   <style lang="scss" scoped>