pyt
2025-04-10 d635b51ae0ffe922d7e56bbceb7229fe7a5fd8f2
src/components/Table/index.vue
@@ -1,11 +1,12 @@
<template>
    <div class="table-container">
        <el-table border :data="tableData" :height="height">
        <el-table border v-bind="$attrs" v-on="$listeners" :height="height">
            <slot></slot>
        </el-table>
        <div>
        <div v-if="total > 0">
            <el-pagination layout="slot, prev, pager, next, sizes, jumper" :page-size="queryForm.pageSize"
                :current-page="queryForm.pageNum" :total="total" class="pagination">
                :current-page="queryForm.pageNum" :total="total" @current-change="handleCurrentChange"
                @size-change="handleSizeChange" class="pagination">
                <div class="pagination-info">第 {{ (queryForm.pageNum == 1) ? 1 : (queryForm.pageNum - 1) *
                    queryForm.pageSize + 1 }}-{{
                        queryForm.pageNum * queryForm.pageSize }} 条/总共 {{ total }} 条</div>
@@ -15,6 +16,7 @@
</template>
<script>
import Vue from 'vue';
export default {
    props: {
        tableData: {
@@ -33,17 +35,28 @@
                    pageNum: 1
                }
            }
        },
        height: {
            type: Number,
            default: () => Vue.prototype.$baseTableHeight()
        }
    },
    computed: {
        height() {
            return this.$baseTableHeight()
    methods: {
        handleCurrentChange(page) {
            this.$emit('handleCurrentChange', page)
        },
    },
        handleSizeChange(size) {
            this.$emit('handleSizeChange', size)
        }
    }
}
</script>
<style scoped lang="less">
::v-deep .select-row {
    background: #E6FFFF !important;
}
.el-table--border,
.el-table--group {
    border-radius: 8px 8px 0px 0px;
@@ -57,6 +70,26 @@
    }
}
::v-deep .el-checkbox__inner:hover {
    border-color: #049C9A !important;
}
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #049C9A !important;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #049C9A !important;
    border-color: #049C9A !important;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #049C9A !important;
    border-color: #049C9A !important;
}
.pagination {
    display: flex;
    justify-content: flex-end;