'保安项目提交'

src/components/aboutTable/Pages.vue

@@ -0,0 +1,91 @@
+<!--
+ * @Author: 表格分页
+ * @Date: 2023-10-20 09:34:38
+ * @LastEditTime: 2023-11-13 18:34:05
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: \project\src\components\aboutTable\Pages\index.vue
+-->
+<template>
+  <div class="fenye" :style="{ top: tableHeight + 'px' }">
+    <el-pagination
+      :current-page="
+        pageData.configer.currentPage ||
+        pageData.configer.pageNo ||
+        pageData.configer.current ||
+        pageData.configer.pageCurrent ||
+        pageData.configer.pageNum"
+      :page-size="pageData.configer.pageSize || pageData.configer.size"
+      :page-sizes="pageSizeArr"
+      :small="small"
+      :disabled="disabled"
+      :background="background"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pageData.configer.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, watchEffect } from "vue";
+
+const props = defineProps({
+  pageSizeArr: {
+    type: Array,
+    default: () => [10, 20, 50, 100]
+  },
+  background: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  small: {
+    type: Boolean,
+    default: false
+  },
+  marginTop: {
+    type: Number,
+    default: 10
+  },
+  tableHeight: {
+    type: Number
+  },
+  pageConfiger: {
+    type: Object,
+    default: () => {
+      return {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      };
+    }
+  }
+});
+const pageData = reactive({
+  configer: {}
+});
+const emit = defineEmits(["changeSize", "changeNo"]);
+// 改变每页条数
+const handleSizeChange = (val) => {
+  emit("changeSize", val);
+};
+// 翻页
+const handleCurrentChange = (val) => {
+  emit("changeNo", val);
+};
+watchEffect(() => {
+  pageData.configer = props.pageConfiger;
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-pagination.is-background .btn-next, ::v-deep .el-pagination.is-background .btn-prev, ::v-deep .el-pagination.is-background .el-pager li{
+  background-color: transparent;
+  color: white;
+}
+</style>