分页

src/views/Model.vue

@@ -28,6 +28,19 @@
           </template>
         </el-table-column>
       </el-table>
+      <div>
+        <el-pagination
+        style="float:right"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="listQuery.page"
+        :page-sizes="[10, 30, 50]"
+         :page-size="listQuery.pageNum"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalNum"
+      >
+      </el-pagination>
+      </div>
     </div>
     <AddMb :type="type" :formData="formData" :templateData="templateData" :dialogVisible="dialogVisible"
       v-if="dialogVisible" @dialogClose="dialogClose" @dialogSuccess="dialogSuccess">
@@ -39,7 +52,7 @@
 </template>
 
 <script>
-import { onMounted, reactive, ref, toRefs } from "vue";
+import { onMounted, reactive, ref, toRefs, computed } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import AddMb from "@/components/AddMb.vue";
 import infoApi from "@/api/infoApi.js";
@@ -55,7 +68,8 @@ export default {
     const state = reactive({
       dialogVisible: false,
       dialogVisible2: false,
-      tableData: [],
+      // tableData: [],
+      tableData1:[],
       formData: {
         template_name: '',
         template_description: '',
@@ -63,9 +77,30 @@ export default {
       },
       formData1: {},
       type: 'I',
-      templateData: {}
+      templateData: {},
+      listQuery: {
+        page: 1,
+        pageNum: 10
+      }
     });
 
+    const tableData = computed(() => {
+      // 分页的起始下标
+      const startIndex = (state.listQuery.page - 1) * state.listQuery.pageNum;
+      // 分页的末尾下标
+      const endIndex = startIndex + state.listQuery.pageNum;
+      // 返回切割后的数据
+      return state.tableData1.slice(startIndex, endIndex);
+    });
+
+    const totalNum = computed(() => {
+      return state.tableData1.length;
+    })
+
+    const total = computed(() => {
+      return Math.ceil(state.tableData1.length / state.listQuery.pageNum);
+    })
+
     onMounted(() => {
       getTemplateType();
       getTableData();
@@ -84,7 +119,7 @@ export default {
       const res = await infoApi.getMb();
       if (res.code == 0) {
         // 获取数据
-        state.tableData = res.data && res.data.length > 0 && res.data.sort((a,b) => {
+        state.tableData1 = res.data && res.data.length > 0 && res.data.sort((a,b) => {
           return (a.name > b.name ? 1 : -1)
         });
       } else {
@@ -141,6 +176,14 @@ export default {
       state.dialogVisible2 = false;
       getTableData();
     };
+
+    const handleSizeChange =(val) => {
+      state.listQuery.pageNum = val;
+    }
+
+    const handleCurrentChange = (val) => {
+      state.listQuery.page = val;
+    }
     return {
       ...toRefs(state),
       editData,
@@ -149,7 +192,12 @@ export default {
       addData,
       dialogSuccess,
       dialogClose,
-      viewData
+      viewData,
+      tableData,
+      totalNum,
+      total,
+      handleSizeChange,
+      handleCurrentChange
     };
   },
 };