update

gaosp

2024-01-19 5b9a1d6cb3a7d59c8f2de83c495bba1a069b2723

 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 {