web
2025-03-21 de1de0e73bd260cb1babe7b15c9e943a381009de
src/components/Table/index.vue
@@ -14,6 +14,10 @@
import {onMounted, ref} from "vue";
const props = defineProps({
    searchData: {
        type: Object,
        default: () => {}
    },
    getList: {
        type: Function,
        default: () => {},
@@ -38,12 +42,13 @@
})
const loading = ref(false);
const getData = (data) => {
    const pagedata = { limit: state.limit, page: data.page}
// 默认第一页
const getData = (data={page:1}) => {
    const pagedata = { limit: state.limit, page: data.page, ...props.searchData }
    loading.value = true;
    props.getList(pagedata).then(res => {
        state.list = res.list
        state.total = res.total
        state.list = res.data.list
        state.total = res.data.total
    }).finally(() => {
        loading.value = false;
    })
@@ -51,6 +56,11 @@
onMounted(() =>{
    getData({ page: state.page })
})
// 将方法抛出去,外面可以调用
defineExpose({
    getData
})
</script>
@@ -94,17 +104,16 @@
                </el-table-column>
            </template>
        </el-table>
        <div class="pagination">
        <div class="pagination" v-show="state.total > 0">
            <div class="pagination-total">共{{state.total}}条</div>
            <pagination
                v-show="state.total > 0"
                layout="prev, pager, next, jumper"
                :total="state.total"
                :page="state.current"
                :limit="state.limit"
                @pagination="getData"
            />
            <!-- 页面右侧自定义插槽,可以加自定义按钮 -->
            <!-- 页码右侧自定义插槽,可以加自定义按钮 -->
            <slot name="pagination"></slot>
        </div>
    </div>
@@ -119,6 +128,9 @@
        color: #fff;
    }
}
:deep(.el-table--default .el-table__cell){
    padding: 12px 0;
}
:deep(.pagination-container){
    background-color: transparent;
    margin: 0;