导出删除数据

src/components/MobilePagination.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="mobile-pagination">
+    <el-button type="primary" size="small" :disabled="currentPage <= 1" @click="loadPreviousPage">
+      {{ $t('employee.previous') || '上一页' }}
+    </el-button>
+    <span class="page-info">
+      {{ currentPage }} / {{ totalPages }}
+    </span>
+    <el-button type="primary" size="small" :disabled="currentPage >= totalPages" @click="loadNextPage">
+      {{ $t('employee.loadNext') || '下一页' }}
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits } from 'vue'
+const { t } = useI18n() // 国际化
+
+const props = defineProps({
+  page: { type: Number, required: true },
+  limit: { type: Number, required: true },
+  total: { type: Number, required: true }
+})
+
+const emits = defineEmits(['update:page', 'load', 'loadPre'])
+
+const totalPages = computed(() => Math.ceil(props.total / props.limit))
+const currentPage = computed(() => props.page)
+
+const loadNextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    emits('update:page', currentPage.value)
+    emits('load') // 触发外部方法加载下一页数据
+  }
+}
+
+const loadPreviousPage = () => {
+  if (currentPage.value > 1) {
+    emits('update:page', currentPage.value)
+    emits('loadPre')
+  }
+}
+</script>
+
+<style scoped>
+.mobile-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 16px 0;
+  gap: 16px;
+}
+
+.page-info {
+  font-size: 14px;
+  color: #666;
+}
+</style>