From d958e1e0a3f9c1e051e803831552ec7d62e76da6 Mon Sep 17 00:00:00 2001 From: QYF-GitLab1 <1940665526@qq.com> Date: 星期二, 04 三月 2025 11:19:28 +0800 Subject: [PATCH] 模型库更新 --- src/views/model/children/landerModel.vue | 50 ++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 46 insertions(+), 4 deletions(-) diff --git a/src/views/model/children/landerModel.vue b/src/views/model/children/landerModel.vue index f85a342..e8d3bae 100644 --- a/src/views/model/children/landerModel.vue +++ b/src/views/model/children/landerModel.vue @@ -20,6 +20,7 @@ border style="width: 100%" @selection-change="handleSelectionChange" + class="landerTable" > <el-table-column type="selection" width="55" /> <el-table-column prop="index" label="搴忓彿" width="70" /> @@ -28,17 +29,37 @@ <el-table-column prop="address" label="Address" /> </el-table> </div> + <div class="lander-pagination-block"> + <el-pagination + v-model:current-page="currentPage" + :page-size="pageSize" + :size="size" + :background="background" + layout="total, prev, pager, next" + :total="100" + @current-change="handleCurrentChange" + /> + </div> </div> </template> <script setup lang="ts"> import { ref } from "vue"; import { Plus } from "@element-plus/icons-vue"; -import type { TableInstance } from "element-plus"; +import type { ComponentSize, TableInstance } from "element-plus"; +// 鎼滅储 const input4 = ref(""); + +// 琛ㄦ牸 const multipleTableRef = ref<TableInstance>(); const multipleSelection = ref<any[]>([]); + +// 鍒嗛〉 +const currentPage = ref(4); +const pageSize = ref(20); +const size = ref<ComponentSize>("default"); +const background = ref(true); const tableData = [ { @@ -85,8 +106,11 @@ }, ]; +const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`); +}; + const handleSelectionChange = (val: []) => { - console.log(val); multipleSelection.value = val; }; </script> @@ -94,13 +118,31 @@ <style lang="less" scoped> .landerBox { width: 100%; + height: 100%; + .landerTopBox { display: flex; justify-content: space-between; - margin-bottom: 10px; + align-items: center; + height: 50px; + padding: 0 10px; + box-sizing: border-box; } .landerContentBox { - width: 100%; + max-height: calc(100% - 120px); + padding: 0 10px; + box-sizing: border-box; + + .landerTable { + height: 750px; + } + } + .lander-pagination-block { + height: 60px; + display: flex; + justify-content: flex-end; + padding: 0 20px; + background-color: #fff; } } </style> -- Gitblit v1.9.1