TreeData
/
cloud-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

```refactor(money-detail): 优化表格布局并添加分页功能 

调整表格样式，以提升视觉效果和可读性。添加分页组件以支持大量数据的管理。
```
master
wxy 2024-08-27 20:10:21 +08:00
parent 6a6cd790cf
commit c8c05ee785
1 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/money/detail/index.vue
View File

@ -1,52 +1,67 @@
<template> <template>
<div> <div style="padding: 20px;">
<h1>充值明细</h1> <h1 style="text-align: center; margin-bottom: 30px;">充值明细</h1>
<el-divider></el-divider> <el-divider></el-divider>
<el-table <el-table
:data="listDate" :data="listDate"
style="width: 150%"> style="width: 100%; border-collapse: collapse;">
<el-table-column <el-table-column
label="序号" label="序号"
width="180"> width="300"
style="border: 1px solid #ccc; padding: 10px; text-align: center;">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.id }}</span> {{ scope.row.id }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="充值编号" label="充值编号"
width="180"> width="300"
style="border: 1px solid #ccc; padding: 10px; text-align: center;">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.outTradeNo }}</span> {{ scope.row.outTradeNo }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="充值金额" label="充值金额"
width="180"> width="300"
style="border: 1px solid #ccc; padding: 10px; text-align: center;">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.totalAmount }}</span> {{ scope.row.totalAmount }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="充值类型" label="充值类型"
width="180"> width="300"
style="border: 1px solid #ccc; padding: 10px; text-align: center;">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.productCode }}</span> {{ scope.row.productCode }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="充值时间" label="充值时间"
width="180"> width="300"
style="border: 1px solid #ccc; padding: 10px; text-align: center;">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.createTime }}</span> {{ scope.row.createTime }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination
v-show="total > 0"
:limit.sync="queryParams.pageSize"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList"
/>
</div> </div>
</template> </template>
<script> <script>
import { userPayinfo } from "@/api/system/user"; import { userPayinfo } from "@/api/system/user";
import PanelGroup from "@/views/dashboard/PanelGroup.vue";
export default { export default {
components: {PanelGroup},
data() { data() {
return { return {
listDate: [], listDate: [],
@ -66,8 +81,7 @@ export default {
this.listDate = response.data.rows; this.listDate = response.data.rows;
this.total = response.data.total; this.total = response.data.total;
} }
); );}
}
} }
} }
</script> </script>