| | |
| | | import {onMounted, ref} from "vue"; |
| | | |
| | | const props = defineProps({ |
| | | searchData: { |
| | | type: Object, |
| | | default: () => {} |
| | | }, |
| | | getList: { |
| | | type: Function, |
| | | default: () => {}, |
| | |
| | | }) |
| | | 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; |
| | | }) |
| | |
| | | |
| | | onMounted(() =>{ |
| | | getData({ page: state.page }) |
| | | }) |
| | | |
| | | // 将方法抛出去,外面可以调用 |
| | | defineExpose({ |
| | | getData |
| | | }) |
| | | </script> |
| | | |
| | |
| | | </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> |
| | |
| | | color: #fff; |
| | | } |
| | | } |
| | | :deep(.el-table--default .el-table__cell){ |
| | | padding: 12px 0; |
| | | } |
| | | :deep(.pagination-container){ |
| | | background-color: transparent; |
| | | margin: 0; |