FetchTable.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
  3. <BasicTable @register="registerTable">
  4. <template #toolbar>
  5. <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
  6. <a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button>
  7. </template>
  8. </BasicTable>
  9. </PageWrapper>
  10. </template>
  11. <script lang="ts">
  12. import { defineComponent } from 'vue';
  13. import { BasicTable, useTable } from '/@/components/Table';
  14. import { getBasicColumns } from './tableData';
  15. import { PageWrapper } from '/@/components/Page';
  16. import { demoListApi } from '/@/api/demo/table';
  17. export default defineComponent({
  18. components: { BasicTable, PageWrapper },
  19. setup() {
  20. const [registerTable, { reload }] = useTable({
  21. title: '远程加载示例',
  22. api: demoListApi,
  23. columns: getBasicColumns(),
  24. });
  25. function handleReloadCurrent() {
  26. reload();
  27. }
  28. function handleReload() {
  29. reload({
  30. page: 1,
  31. });
  32. }
  33. return {
  34. registerTable,
  35. handleReloadCurrent,
  36. handleReload,
  37. };
  38. },
  39. });
  40. </script>