修改组件

张红振
1 parent 41649caf
Showing 2 changed files with 52 additions and 28 deletions
src/components/Pagination/index.vue
src/views/community/index.vue
@@ -67,6 +67,7 @@ const emit = defineEmits&lt;{
       :page-size="pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
+      background 
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
     >
@@ -78,4 +79,8 @@ const emit = defineEmits&lt;{
 .pagination-container {
   padding: 10px;
 }
+.el-pagination {
+  margin-top: 30px;
+  text-align: right;
+}
 </style>
 <script setup lang="ts">
-import { reactive,onMounted } from "vue";
+import { reactive, onMounted } from "vue";
 import { getTableList } from "@/api/community";
 import Pagination from "@/components/Pagination/index.vue";
-// 搜索列表参数
-const form = reactive({
-  propertyId: 1,
-  type:0,
-  name: null,
-});
-// 表格
-const tableList = [
-  {
-    propertyId: 1,
-    name: null,
-  },
-  {
+interface Item {
+  name: string,
+  type: number, 
+  id:number,
+}
+ // 列表
+const tableData:Array<Item>  = reactive([])
+
+const data = reactive({
+  // 搜索列表参数
+  search: {
     propertyId: 1,
+    type: 0,
     name: null,
   },
-];
+  // 分页
+  total: 0,
+  pageNum: 1,
+  pageSize: 0,
+
+});
+
 /**
  * 列表查询
  */
 const search = () => {
-  getTableList(form)
+  getTableList(data.search)
     .then((res) => {
-      console.log(res);
+      data.tableList = res.data.data.list;
+      tableData.push(...res.data.data.list) ;
+      tableData.push({name:12131,type:'1',id:'1'}) ;
+      data.total = res.data.data.total;
+      data.pageSize = res.data.data.pageSize;
+      data.pageNum = res.data.data.pageNum;
+      data.tableList = res.data.data.list;
+      console.log(data.tableList);
+      console.log(tableData);
     })
     .catch((err) => {
       console.log(err);
     });
 };
-onMounted(()=>{
- search()
-//  console.log()
-})
+
+onMounted(() => {
+  search();
+});
 </script>
 <template>
   <div class="app-container">
-    <el-form :inline="true" :model="form">
+    <el-form :inline="true" :model="data.search">
       <el-form-item>
-        <el-input placeholder="请输入社区名称" v-model="form.name"></el-input>
+        <el-input
+          placeholder="请输入社区名称"
+          v-model="data.search.name"
+        ></el-input>
       </el-form-item>
       <el-form-item
         ><el-button type="primary" @click="search"
@@ -56,8 +72,8 @@ onMounted(()=&gt;{
         </el-form-item>
       </el-row>
     </el-form>
-    <el-table border :data="tableList">
-      <el-table-column label="小区名称"></el-table-column>
+    <el-table border :data="tableData">
+      <el-table-column label="小区名称" prop="name"></el-table-column>
       <el-table-column label="楼座数"></el-table-column>
       <el-table-column label="储藏室数"></el-table-column>
       <el-table-column label="车位数"></el-table-column>
@@ -71,9 +87,12 @@ onMounted(()=&gt;{
         </template>
       </el-table-column>
     </el-table>
-    <!-- <Pagination
-    
-    ></Pagination> -->
+    <Pagination
+      :total="data.total"
+      :currentPage="data.pageNum"
+      :pageSize="data.pageSize"
+      @pageChange="getTableList"
+    ></Pagination>
   </div>
 </template>