ntrip通信服务平台

src/components/search/pagination.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex justify-center my-2">
+    <el-pagination
+      class="flex justify-center flex-wrap"
+      v-model:current-page="offset"
+      v-model:page-size="limit"
+      :page-sizes="pageSizes"
+      size="small"
+      background
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="dataCount"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+const offset = ref(1);
+const limit = ref(10);
+const dataCount = ref(0);
+const pageSizes = [10, 20, 50, 100];
+
+const props = defineProps({
+    active: Object,
+});
+
+const emit = defineEmits(["search", "sizeChangeBack"]);
+
+const handleSizeChange = (val) => {
+  offset.value = 1;
+  props.active.offset = offset.value;
+  emit("sizeChangeBack", val);
+  limit.value = val;
+  props.active.limit = limit.value;
+  emit("search");
+};
+
+const handleCurrentChange = (val) => {
+  offset.value = val;
+  props.active.offset = offset.value;
+  emit("search");
+};
+
+defineExpose({ offset, limit, dataCount, handleCurrentChange });
+
+onMounted(() => {
+  offset.value = props.active.offset;
+  limit.value = props.active.limit;
+  dataCount.value = props.active.dataCount;
+  emit("search");
+});
+</script>
+
+<style scoped></style>