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 | 143 ++++++++++++++++++++++++++++++++++++-----------
1 files changed, 108 insertions(+), 35 deletions(-)
diff --git a/src/container/list/index.vue b/src/container/list/index.vue
index 2020fb5..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 19:54:37
+ * @LastEditTime: 2024-01-18 23:55:56
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/list/index.vue
-->
<template>
@@ -10,9 +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"
@@ -29,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>
@@ -44,12 +47,39 @@
</template>
<script>
export default {
- data () {
- return {
- tableData: [{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">
@@ -58,10 +88,6 @@
height: 100%;
overflow: auto;
.table {
- .el-table td, .el-table th.is-leaf {
- // border-bottom: 1px solid red;
- // padding: 20px ;
- }
.el-table::before {
background-color: transparent;
}
@@ -69,7 +95,6 @@
color: #E6E5E5;
background-color: #182D54;
border-bottom: none;
-
}
.el-table {
color: #E6E5E5;
@@ -78,35 +103,42 @@
border-bottom: none;
padding: 0;
}
- .el-table td{
+ .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;
border-bottom: none;
background: transparent;
- background-color: transparent!important;;
+ background-color: transparent;
// padding: 0;
}
.el-table tr{
color: #E6E5E5;
border-bottom: none;
background: transparent;
- background-color: transparent!important;;
- border-bottom: none;
- padding: 0;
- }
- .el-table__header {
- color: #E6E5E5;
- background: transparent;
background-color: transparent;
border-bottom: none;
padding: 0;
}
- .el-table__body-wrapper {
- color: #E6E5E5;
- background: transparent;
- background-color: transparent;
- border-bottom: none;
- padding: 0;
+ .el-table tr.el-table__row--striped {
+ background-color: #182D54!important;
+
}
+ // .el-table__header {
+ // color: #E6E5E5;
+ // background: transparent;
+ // background-color: transparent;
+ // border-bottom: none;
+ // padding: 0;
+ // }
+ // .el-table__body-wrapper {
+ // color: #E6E5E5;
+ // background: transparent;
+ // background-color: transparent;
+ // border-bottom: none;
+ // padding: 0;
+ // }
.el-table__header-wrapper {
border: none;
border-bottom: none;
@@ -129,20 +161,42 @@
</style>
<style lang="scss" scoped>
.list {
-
+ padding: 30px;
}
.search {
- margin: 20px 30px 0;
- padding: 20px 30px;
+ // margin: 20px 30px;
+ padding: 30px 0px;
+ min-height: 160px;
display: flex;
flex-wrap: wrap;
- background: url('./search.png') 100% 100% 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 {
@@ -151,4 +205,23 @@
right: 40px;
}
}
+ .table::-webkit-scrollbar {
+ width: 4px; /* Chrome/Safari */
+ }
+
+ /* 瀹氫箟婊戝潡锛坱humb锛夌殑鏍峰紡 */
+ .table::-webkit-scrollbar-thumb {
+ background-color: #999; /* Chrome/Safari */
+ }
+
+ /* 褰撴粦鍧楄鎸変笅鏃剁殑鏍峰紡 */
+ .table::-webkit-scrollbar-thumb:hover {
+ background-color: #666; /* Chrome/Safari */
+ }
+
+ /* 瀹氫箟涓や晶杈圭晫鐨勬牱寮� */
+ .table::-webkit-scrollbar-track {
+ background-color: #f5f5f5; /* Chrome/Safari */
+ }
+
</style>
\ No newline at end of file
--
Gitblit v1.9.3