From 5b9a1d6cb3a7d59c8f2de83c495bba1a069b2723 Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期五, 19 一月 2024 00:23:15 +0800
Subject: [PATCH] update
---
src/container/list/index.vue | 85 ++++++++++++++++++++++++++++++++++--------
1 files changed, 68 insertions(+), 17 deletions(-)
diff --git a/src/container/list/index.vue b/src/container/list/index.vue
index a92b5f8..7548ada 100644
--- a/src/container/list/index.vue
+++ b/src/container/list/index.vue
@@ -1,7 +1,7 @@
<!--
* @Date: 2024-01-06 17:40:19
* @LastEditors: Sneed
- * @LastEditTime: 2024-01-06 22:05:59
+ * @LastEditTime: 2024-01-18 23:55:56
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/list/index.vue
-->
<template>
@@ -10,10 +10,12 @@
<slot name="search"></slot>
</div>
<div class="table">
+ <slot name="table-tool"></slot>
<el-table
stripe
:data="tableData"
- style="width: 100%">
+ v-loading="loading"
+ style="width: 100%;margin-top: 20px;">
<slot name="columns"></slot>
<!-- <el-table-column
prop="date"
@@ -30,13 +32,13 @@
label="鍦板潃">
</el-table-column> -->
</el-table>
- <div class="pagination">
+ <div v-if="total" class="pagination">
<el-pagination
style="background: transparent;"
- :page-size="20"
- :pager-count="11"
+ :page-size="pageSize"
+ :current-page="current"
layout="prev, pager, next"
- :total="1000">
+ :total="total">
</el-pagination>
</div>
@@ -45,14 +47,39 @@
</template>
<script>
export default {
- data () {
- return {
- tableData: [{name:123},{name:123},
- {name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},
- ]
+ props: {
+ url: {
+ type: String
}
},
-
+ data () {
+ return {
+ tableData: [],
+ pageSize: 10,
+ current: 1,
+ total: 0,
+ loading: false
+ }
+ },
+ created () {
+ this.pageQuery()
+ },
+ methods: {
+ pageQuery(params) {
+ this.loading = true
+ this.$http.postJson(this.url,{
+ pageSize: this.pageSize,
+ current: this.current,
+ ...params
+ }).then(res => {
+ console.log(res)
+ this.tableData = res.data.records || []
+ this.total = res.data.total
+ }).finally(() => {
+ this.loading = false
+ })
+ }
+ },
}
</script>
<style lang="scss">
@@ -61,7 +88,6 @@
height: 100%;
overflow: auto;
.table {
-
.el-table::before {
background-color: transparent;
}
@@ -76,6 +102,9 @@
background-color: transparent;
border-bottom: none;
padding: 0;
+ }
+ .el-table__fixed-right::before, .el-table__fixed::before {
+ background: transparent;
}
.el-table td, .el-table--striped .el-table__body tr.el-table__row--striped td,.el-table--enable-row-hover .el-table__body tr:hover>td{
color: #E6E5E5;
@@ -132,20 +161,42 @@
</style>
<style lang="scss" scoped>
.list {
-
+ padding: 30px;
}
.search {
- margin: 20px 30px;
+ // margin: 20px 30px;
padding: 30px 0px;
+ min-height: 160px;
display: flex;
flex-wrap: wrap;
- background: url('./search.png') center center no-repeat;
+ position: relative;
+ }
+ .search:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 4px;
+ background: url('./border.png') 100% 100% no-repeat;
+ background-size: contain;
+ }
+ .search:after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 4px;
+ background: url('./border.png') 100% 100% no-repeat;
background-size: contain;
}
.table {
margin-top: 20px;
margin-bottom: 30px;
- padding: 20px 30px;
+ padding: 20px 0px;
background: transparent;
overflow: auto;
.pagination {
--
Gitblit v1.9.3