| | |
| | | </el-table-column> |
| | | <el-table-column prop="price" label="价格" width="140"></el-table-column> |
| | | <el-table-column prop="quantity" label="数量" width="140"></el-table-column> |
| | | <el-table-column prop="description" label="描述" width="150"></el-table-column> |
| | | <el-table-column prop="description" label="描述"></el-table-column> |
| | | <el-table-column label="操作" width="150" fixed="right" align="center"> |
| | | <template #default="{ row }"> |
| | | <el-button |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- 分页组件 --> |
| | | <div class="pagination-container"> |
| | | <el-pagination |
| | | v-model:current-page="pagination.current" |
| | | v-model:page-size="pagination.size" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :total="pagination.total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <el-dialog title="分类管理" v-model="dialogVisible" width="60%"> |
| | | <el-form :model="form" :rules="rules" ref="formRef" label-width="100px"> |
| | |
| | | const queryParams = reactive({ |
| | | name: '' |
| | | }); |
| | | // 分页参数 |
| | | const pagination = reactive({ |
| | | current: 1, |
| | | size: 10, |
| | | total: 0 |
| | | }); |
| | | // 表单数据 |
| | | const form = reactive({ |
| | | id:'', |
| | |
| | | const fetchListData = async () => { |
| | | loading.value = true; |
| | | try { |
| | | const params = {}; |
| | | const params = { |
| | | current: pagination.current, |
| | | size: pagination.size |
| | | }; |
| | | if (queryParams.name) { |
| | | params.name = queryParams.name; |
| | | } |
| | |
| | | if (res.code === 200) { |
| | | renderTableData.value = res.data.records || []; |
| | | categories.value = res.data.records || []; |
| | | pagination.total = res.data.total || 0; |
| | | } |
| | | } catch (error) { |
| | | loading.value = false; |
| | |
| | | |
| | | // 查询 |
| | | const handleQuery = () => { |
| | | pagination.current = 1; |
| | | fetchListData(); |
| | | } |
| | | |
| | | // 重置查询 |
| | | const resetQuery = () => { |
| | | queryParams.name = ''; |
| | | pagination.current = 1; |
| | | fetchListData(); |
| | | } |
| | | |
| | | // 分页大小改变 |
| | | const handleSizeChange = (size) => { |
| | | pagination.size = size; |
| | | pagination.current = 1; |
| | | fetchListData(); |
| | | } |
| | | |
| | | // 当前页改变 |
| | | const handleCurrentChange = (current) => { |
| | | pagination.current = current; |
| | | fetchListData(); |
| | | } |
| | | |
| | |
| | | margin-top: unset; |
| | | } |
| | | |
| | | .pagination-container { |
| | | margin-top: 20px; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | padding: 16px 0; |
| | | } |
| | | |
| | | .el-table__header-wrapper th { |
| | | background-color: #f5f7fa; |
| | | font-weight: 600; |