<!--
|
* @Date: 2024-01-06 17:40:19
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-03-10 11:39:46
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/list/index.vue
|
-->
|
<template>
|
<div class="list">
|
<div class="search" v-show="!hideSearchBox">
|
<slot name="search"></slot>
|
</div>
|
<div class="table">
|
<slot name="table-tool"></slot>
|
<el-table stripe :data="tableData" v-loading="loading" style="width: 100%;margin-top: 20px;">
|
<slot name="columns"></slot>
|
<!-- <el-table-column
|
prop="date"
|
label="日期"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="姓名"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="地址">
|
</el-table-column> -->
|
</el-table>
|
<div v-if="total" class="pagination">
|
<el-pagination @current-change="currentChange" @prev-click="currentChange" @next-click="currentChange"
|
style="background: transparent;" :page-size="pageSize" :current-page="current"
|
layout="prev, pager, next" :total="total">
|
</el-pagination>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: {
|
url: {
|
type: String
|
},
|
hideSearchBox: {
|
type: Boolean,
|
default: false
|
},
|
data: {
|
type: Object,
|
default: () => { return {} }
|
}
|
},
|
data() {
|
return {
|
tableData: [],
|
pageSize: 10,
|
current: 1,
|
total: 0,
|
loading: false,
|
params: {}
|
}
|
},
|
mounted() {
|
this.pageQuery()
|
},
|
methods: {
|
currentChange(e) {
|
this.current = e
|
this.pageQuery()
|
},
|
pageQuery(params) {
|
if (params) this.params = params
|
this.loading = true
|
this.$http.postJson(this.url, {
|
...this.params,
|
...this.data,
|
pageSize: this.pageSize,
|
current: this.current,
|
}).then(res => {
|
console.log(res)
|
this.tableData = res.data.records || []
|
this.total = res.data.total
|
}).finally(() => {
|
this.loading = false
|
})
|
}
|
},
|
}
|
</script>
|
<style lang="scss">
|
.list {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
|
.table {
|
.hover-row {
|
background-color: transparent;
|
|
td.el-table__cell {
|
background-color: transparent;
|
}
|
}
|
|
.el-table::before {
|
background-color: transparent;
|
}
|
|
.el-table th {
|
color: #E6E5E5;
|
background-color: #182D54;
|
border-bottom: none;
|
}
|
|
.el-table {
|
color: #E6E5E5;
|
background: transparent;
|
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;
|
border-bottom: none;
|
background: transparent;
|
background-color: transparent;
|
// padding: 0;
|
}
|
|
.el-table tr {
|
color: #E6E5E5;
|
border-bottom: none;
|
background: transparent;
|
background-color: transparent;
|
border-bottom: none;
|
padding: 0;
|
}
|
|
.el-table tr.el-table__row--striped {
|
background-color: #182D54 !important;
|
|
}
|
|
.el-table__header-wrapper {
|
border: none;
|
border-bottom: none;
|
padding: 0;
|
}
|
}
|
|
.pagination {
|
background: transparent;
|
}
|
|
.el-pager li {
|
background: transparent;
|
}
|
|
.el-pagination button:disabled {
|
background: transparent;
|
}
|
|
.el-pagination .btn-next,
|
.el-pagination .btn-prev {
|
background: transparent;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
.list {
|
padding: 0 30px;
|
}
|
|
.search {
|
margin: 0px 10px;
|
padding: 30px 0px;
|
min-height: 160px;
|
display: flex;
|
flex-wrap: wrap;
|
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 0px;
|
background: transparent;
|
overflow: auto;
|
|
.pagination {
|
position: absolute;
|
bottom: 50px;
|
right: 40px;
|
z-index: 99;
|
}
|
}
|
|
.table::-webkit-scrollbar {
|
width: 4px;
|
/* Chrome/Safari */
|
}
|
|
/* 定义滑块（thumb）的样式 */
|
.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>
|
