<template> <div class="p-4"> <div class="mb-4"> <a-button class="mr-2" @click="reloadTable">还原</a-button> <a-button class="mr-2" @click="changeLoading">开启loading</a-button> <a-button class="mr-2" @click="changeColumns">更改Columns</a-button> <a-button class="mr-2" @click="getColumn">获取Columns</a-button> <a-button class="mr-2" @click="getTableData">获取表格数据</a-button> <a-button class="mr-2" @click="setPaginationInfo">跳转到第2页</a-button> </div> <div class="mb-4"> <a-button class="mr-2" @click="getSelectRowList">获取选中行</a-button> <a-button class="mr-2" @click="getSelectRowKeyList">获取选中行Key</a-button> <a-button class="mr-2" @click="setSelectedRowKeyList">设置选中行</a-button> <a-button class="mr-2" @click="clearSelect">清空选中行</a-button> <a-button class="mr-2" @click="getPagination">获取分页信息</a-button> </div> <BasicTable :canResize="false" title="RefTable示例" titleHelpMessage="使用Ref调用表格内方法" ref="tableRef" :api="api" :columns="columns" rowKey="id" :rowSelection="{ type: 'checkbox' }" /> </div> </template> <script lang="ts"> import { defineComponent, ref, unref } from 'vue'; import { BasicTable, TableActionType } from '/@/components/Table'; import { getBasicColumns, getBasicShortColumns } from './tableData'; import { useMessage } from '/@/hooks/web/useMessage'; import { demoListApi } from '/@/api/demo/table'; export default defineComponent({ components: { BasicTable }, setup() { const tableRef = ref<Nullable<TableActionType>>(null); const { createMessage } = useMessage(); function getTableAction() { const tableAction = unref(tableRef); if (!tableAction) { throw new Error('tableAction is null'); } return tableAction; } function changeLoading() { getTableAction().setLoading(true); setTimeout(() => { getTableAction().setLoading(false); }, 1000); } function changeColumns() { getTableAction().setColumns(getBasicShortColumns()); } function reloadTable() { getTableAction().setColumns(getBasicColumns()); getTableAction().reload({ page: 1, }); } function getColumn() { createMessage.info('请在控制台查看!'); console.log(getTableAction().getColumns()); } function getTableData() { createMessage.info('请在控制台查看!'); console.log(getTableAction().getDataSource()); } function getPagination() { createMessage.info('请在控制台查看!'); console.log(getTableAction().getPaginationRef()); } function setPaginationInfo() { getTableAction().setPagination({ current: 2, }); getTableAction().reload(); } function getSelectRowList() { createMessage.info('请在控制台查看!'); console.log(getTableAction().getSelectRows()); } function getSelectRowKeyList() { createMessage.info('请在控制台查看!'); console.log(getTableAction().getSelectRowKeys()); } function setSelectedRowKeyList() { getTableAction().setSelectedRowKeys(['0', '1', '2']); } function clearSelect() { getTableAction().clearSelectedRowKeys(); } return { tableRef, api: demoListApi, columns: getBasicColumns(), changeLoading, changeColumns, reloadTable, getColumn, getTableData, getPagination, setPaginationInfo, getSelectRowList, getSelectRowKeyList, setSelectedRowKeyList, clearSelect, }; }, }); </script>