[TOC] ### 简单的基础模板 ``` <template> <div class="expiredItems-container"> <el-card> <el-table border :data="tableInfoState.data" v-loading="tableInfoState.loading" style="margin-top: 10px"> <el-table-column align="center" label="序号" width="65"> <template #default="{ $index }"> {{ $index + 1 }} </template> </el-table-column> <el-table-column align="center" label="批次名称" min-width="179" prop="batchNumber" /> <el-table-column align="center" label="物品名称" min-width="109" prop="itemName" /> <el-table-column align="center" label="剩余库存" min-width="109" prop="remainingStock" /> <el-table-column prop="expiryDate" label="过期时间" min-width="109" show-overflow-tooltip> <template #default="scope"> <span>{{ dayjs(scope.row.expiryDate).format('YYYY-MM-DD HH:mm:ss') }}</span> </template> </el-table-column> </el-table> </el-card> </div> </template> <script setup lang="ts" name="tasks"> import { reactive, onMounted, ref } from 'vue'; import { ElMessageBox, ElMessage, dayjs } from 'element-plus'; import request from '/@/utils/requestTools'; // 表格数据相关 const tableInfoState = reactive({ data: [], total: 0, loading: false, param: { key: '', pageIndex: 1, pageSize: 10, }, }); onMounted(() => { getExpiryBatchStatistics(); }); const getExpiryBatchStatistics = async () => { tableInfoState.loading = true; const result: any = await request.get('/watertap/api/Batches/GetExpiryBatchStatistics', tableInfoState.param); tableInfoState.data = result.data.data; tableInfoState.loading = false; }; </script> <style scoped="scoped" lang="scss"> .expiredItems-container { padding: 15px; } </style> ``` ### 包含分页条与搜索框的 ``` <template> <div class="expiredItems-container"> <el-card> <div class="toolbar"> <div> <el-button type="primary" :icon="Plus" size="default" >添加 </el-button> </div> <div class="search"> <!-- <el-select v-model="tableInfoState.param.levelId" class="select-level searchinput" size="default" clearable> <el-option v-for="sh in levelList" :key="sh.id" :value="sh.id" :label="sh.label" /> </el-select> --> <el-input v-model="tableInfoState.param.key" placeholder="名称" class="searchinput" size="default" clearable /> <el-button type="primary" :icon="Search" size="default" @click="getExpiryBatchStatistics">搜索</el-button> </div> </div> <el-table border :data="tableInfoState.data" v-loading="tableInfoState.loading" style="margin-top: 10px"> <el-table-column align="center" label="序号" width="65"> <template #default="{ $index }"> {{ $index + 1 }} </template> </el-table-column> <el-table-column align="center" label="批次名称" min-width="179" prop="batchNumber" /> <el-table-column align="center" label="物品名称" min-width="109" prop="itemName" /> <el-table-column align="center" label="剩余库存" min-width="109" prop="remainingStock" /> <el-table-column prop="expiryDate" label="过期时间" min-width="109" show-overflow-tooltip> <template #default="scope"> <span>{{ dayjs(scope.row.expiryDate).format('YYYY-MM-DD HH:mm:ss') }}</span> </template> </el-table-column> </el-table> <div style="margin: 20px auto; text-align: center; display: flex; justify-content: center"> <el-pagination background size="default" @current-change="handleCurrentChange" layout="total,sizes,prev, pager, next" :page-sizes="[5, 10, 20, 30]" @size-change="handleSizeChange" :current-page="tableInfoState.param.pageIndex" :page-size="tableInfoState.param.pageSize" :total="tableInfoState.total" /> </div> </el-card> </div> </template> <script setup lang="ts" name="tasks"> import { reactive, onMounted, ref } from 'vue'; import { Search, Plus, Edit } from '@element-plus/icons-vue'; import { ElMessageBox, ElMessage, dayjs } from 'element-plus'; import request from '/@/utils/requestTools'; // 表格数据相关 const tableInfoState = reactive({ data: [], total: 0, loading: false, param: { key: '', pageIndex: 1, pageSize: 10, }, }); onMounted(() => { getExpiryBatchStatistics(); }); const getExpiryBatchStatistics = async () => { tableInfoState.loading = true; const result: any = await request.get('/watertap/api/Batches/GetExpiryBatchStatistics', tableInfoState.param); tableInfoState.data = result.data.data; tableInfoState.total = result.data.dataCount; tableInfoState.loading = false; }; const handleCurrentChange = (val: number) => { tableInfoState.param.pageIndex = val; getExpiryBatchStatistics(); }; const handleSizeChange = (val: number) => { // 改变了每页的条数后重新从第一页开始吧 tableInfoState.param.pageIndex = 1; tableInfoState.param.pageSize = val; getExpiryBatchStatistics(); }; </script> <style scoped="scoped" lang="scss"> .expiredItems-container { padding: 15px; .toolbar { display: flex; justify-content: space-between; .search { display: flex; .searchinput { width: 199px; } } .search > * { margin-left: 6px; } } } </style> ```