分页问题修改

src/components/CommonTable/index.vue

@@ -93,7 +93,7 @@ const props = defineProps({
   align: {
     type: String,
     default: "left",
-  }
+  },
 });
 
 const emit = defineEmits([
@@ -148,7 +148,7 @@ const total = computed(() => props.total);
 
 // 当前页数据
 const currentPageData = computed(() => {
-  if (!props.showPagination) return props.data;
+  if (props.showPagination) return props.data;
   const start = (currentPage.value - 1) * pageSize.value;
   const end = start + pageSize.value;
   return props.data.slice(start, end);
@@ -178,11 +178,17 @@ const emitPaginationChange = () => {
   emit("update:page-size", pageSize.value);
 };
 
+const setCurrentPage = () => {
+  currentPage.value = 1;
+};
+
+defineExpose({ setCurrentPage })
+
 // 监听数据变化，重置分页
 watch(
   () => props.data,
   () => {
-    currentPage.value = 1;
+    // currentPage.value = 1;
   },
   { deep: true }
 );

src/views/AboutView/AboutView.vue

@@ -74,10 +74,11 @@
       </div>
       <div class="table-box">
         <common-table
+          ref="pageRef"
           :data="tableData.list"
           :columns="tableColumns"
           :total="total"
-          :default-page-size="pageSize"
+          :default-page-size="20"
           @pagination-change="handlePaginationChange"
           :pagination-texts="{
             total: '共',
@@ -167,7 +168,7 @@ const tableColumns = ref([
   {
     prop: "index",
     label: "序号",
-    width: "5%",
+    width: "4%",
   },
   {
     prop: "eventName",
@@ -177,22 +178,22 @@ const tableColumns = ref([
   {
     prop: "name",
     label: "发生位置",
-    width: "9%",
+    width: "15%",
   },
   {
     prop: "deviceType",
     label: "设备类型",
-    width: "9%",
+    width: "7%",
   },
   {
     prop: "alarmIndicators",
     label: "告警指标",
-    width: "9%",
+    width: "7%",
   },
   {
     prop: "value",
     label: "监测值",
-    width: "9%",
+    width: "5%",
   },
   {
     prop: "eventTime",
@@ -202,7 +203,7 @@ const tableColumns = ref([
   {
     prop: "isSuspendAlarm",
     label: "是否挂起期间告警",
-    width: "9%",
+    width: "8%",
   },
   {
     prop: "operate",
@@ -212,20 +213,7 @@ const tableColumns = ref([
 ]);
 
 const tableData = reactive({
-  list: [
-    {
-      deviceName: "1#除尘器",
-      compart: "1234567890",
-      position: "转炉",
-      changeDateRemind: "xx",
-      changeDate: "xx",
-      changePeo: "xx",
-      ownerdeviceName: "xx",
-      lastAlarmTime: "xx",
-      changeRound: "xx",
-      operate: "挂起",
-    },
-  ],
+  list: [],
 });
 
 const typeList = reactive({
@@ -251,9 +239,12 @@ const handlePaginationChange = (pagination) => {
 };
 
 const onSubmit = () => {
+  currentPage.value = 1;
+  pageRef.value.setCurrentPage(currentPage.value);
   getAlarmList();
 };
 
+const pageRef = ref(null);
 const onReset = () => {
   formInline.value = {
     eventName: "",
@@ -265,6 +256,7 @@ const onReset = () => {
   };
   currentPage.value = 1;
   pageSize.value = 20;
+  pageRef.value.setCurrentPage(currentPage.value);
   getAlarmList();
 };
 

src/views/collectorList/collectorList.vue

@@ -48,6 +48,7 @@
       </div>
       <div class="table-box">
         <common-table
+          ref="pageRef"
           :data="tableData.list"
           :columns="tableColumns"
           :default-page-size="20"
@@ -184,17 +185,17 @@ const tableColumns = ref([
 
 const tableData = reactive({
   list: [
-    {
-      deviceName: "1#除尘器",
-      compart: "1234567890",
-      position: "转炉",
-      changeDateRemind: "xx",
-      changeDate: "xx",
-      changePeo: "xx",
-      ownerdeviceName: "xx",
-      lastAlarmTime: "xx",
-      changeRound: "xx",
-    },
+    // {
+    //   deviceName: "1#除尘器",
+    //   compart: "1234567890",
+    //   position: "转炉",
+    //   changeDateRemind: "xx",
+    //   changeDate: "xx",
+    //   changePeo: "xx",
+    //   ownerdeviceName: "xx",
+    //   lastAlarmTime: "xx",
+    //   changeRound: "xx",
+    // },
   ],
 });
 
@@ -246,9 +247,12 @@ const handlePaginationChange = (pagination) => {
 };
 
 const onSubmit = () => {
+  currentPage.value = 1;
+  pageRef.value.setCurrentPage(currentPage.value);
   getAllDustList();
 };
 
+const pageRef = ref(null);
 const onReset = () => {
   formInline.value = {
     compart: "",
@@ -257,6 +261,7 @@ const onReset = () => {
   };
   currentPage.value = 1;
   pageSize.value = 20;
+  pageRef.value.setCurrentPage(currentPage.value);
   getAllDustList();
 };
 

src/views/equipmentManagement/suspendManagement/suspendManagement.vue

@@ -46,6 +46,7 @@
       </div>
       <div class="table-box">
         <common-table
+          ref="pageRef"
           :data="tableData.list"
           :columns="tableColumns"
           :default-page-size="20"
@@ -229,9 +230,12 @@ const handlePaginationChange = (pagination) => {
 };
 
 const onSubmit = () => {
+  currentPage.value = 1;
+  pageRef.value.setCurrentPage(1);
   getManagementList();
 };
 
+const pageRef = ref(null);
 const onReset = () => {
   formInline.value = {
     deviceType: "",
@@ -240,6 +244,7 @@ const onReset = () => {
   };
   currentPage.value = 1;
   pageSize.value = 20;
+  pageRef.value.setCurrentPage(currentPage.value);
   getManagementList();
 };