cnlive_project / cnlive-community-web-vue · Commits

Commit 2cbd1f661d0550e52a5471f86acd159c6306a8d3

Authored by 张红振
1 parent 41649caf

修改组件

Inline Side-by-side
Showing 2 changed files with 52 additions and 28 deletions
src/components/Pagination/index.vue
  View file @2cbd1f6
... ... @@ -67,6 +67,7 @@ const emit = defineEmits<{
67 67 :page-size="pageSize"
68 68 layout="total, sizes, prev, pager, next, jumper"
69 69 :total="total"
  70 + background
70 71 @size-change="handleSizeChange"
71 72 @current-change="handleCurrentChange"
72 73 >
... ... @@ -78,4 +79,8 @@ const emit = defineEmits<{
78 79 .pagination-container {
79 80 padding: 10px;
80 81 }
  82 +.el-pagination {
  83 + margin-top: 30px;
  84 + text-align: right;
  85 +}
81 86 </style>
... ...
src/views/community/index.vue
  View file @2cbd1f6
1 1 <script setup lang="ts">
2   -import { reactive,onMounted } from "vue";
  2 +import { reactive, onMounted } from "vue";
3 3 import { getTableList } from "@/api/community";
4 4 import Pagination from "@/components/Pagination/index.vue";
5   -// 搜索列表参数
6   -const form = reactive({
7   - propertyId: 1,
8   - type:0,
9   - name: null,
10   -});
11 5  
12   -// 表格
13   -const tableList = [
14   - {
15   - propertyId: 1,
16   - name: null,
17   - },
18   - {
  6 +interface Item {
  7 + name: string,
  8 + type: number,
  9 + id:number,
  10 +}
  11 + // 列表
  12 +const tableData:Array<Item> = reactive([])
  13 +
  14 +const data = reactive({
  15 + // 搜索列表参数
  16 + search: {
19 17 propertyId: 1,
  18 + type: 0,
20 19 name: null,
21 20 },
22   -];
  21 + // 分页
  22 + total: 0,
  23 + pageNum: 1,
  24 + pageSize: 0,
  25 +
  26 +});
  27 +
23 28 /**
24 29 * 列表查询
25 30 */
26 31 const search = () => {
27   - getTableList(form)
  32 + getTableList(data.search)
28 33 .then((res) => {
29   - console.log(res);
  34 + data.tableList = res.data.data.list;
  35 + tableData.push(...res.data.data.list) ;
  36 + tableData.push({name:12131,type:'1',id:'1'}) ;
  37 + data.total = res.data.data.total;
  38 + data.pageSize = res.data.data.pageSize;
  39 + data.pageNum = res.data.data.pageNum;
  40 + data.tableList = res.data.data.list;
  41 + console.log(data.tableList);
  42 + console.log(tableData);
30 43 })
31 44 .catch((err) => {
32 45 console.log(err);
33 46 });
34 47 };
35   -onMounted(()=>{
36   - search()
37   -// console.log()
38   -})
  48 +
  49 +onMounted(() => {
  50 + search();
  51 +});
39 52 </script>
40 53 <template>
41 54 <div class="app-container">
42   - <el-form :inline="true" :model="form">
  55 + <el-form :inline="true" :model="data.search">
43 56 <el-form-item>
44   - <el-input placeholder="请输入社区名称" v-model="form.name"></el-input>
  57 + <el-input
  58 + placeholder="请输入社区名称"
  59 + v-model="data.search.name"
  60 + ></el-input>
45 61 </el-form-item>
46 62 <el-form-item
47 63 ><el-button type="primary" @click="search"
... ... @@ -56,8 +72,8 @@ onMounted(()=&gt;{
56 72 </el-form-item>
57 73 </el-row>
58 74 </el-form>
59   - <el-table border :data="tableList">
60   - <el-table-column label="小区名称"></el-table-column>
  75 + <el-table border :data="tableData">
  76 + <el-table-column label="小区名称" prop="name"></el-table-column>
61 77 <el-table-column label="楼座数"></el-table-column>
62 78 <el-table-column label="储藏室数"></el-table-column>
63 79 <el-table-column label="车位数"></el-table-column>
... ... @@ -71,9 +87,12 @@ onMounted(()=&gt;{
71 87 </template>
72 88 </el-table-column>
73 89 </el-table>
74   - <!-- <Pagination
75   -
76   - ></Pagination> -->
  90 + <Pagination
  91 + :total="data.total"
  92 + :currentPage="data.pageNum"
  93 + :pageSize="data.pageSize"
  94 + @pageChange="getTableList"
  95 + ></Pagination>
77 96 </div>
78 97 </template>
79 98  
... ...