JasonYHZ
5 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with
27 additions and
0 deletions
-
src/components/Table/src/BasicTable.vue
-
src/components/Table/src/hooks/useDataSource.ts
-
src/components/Table/src/hooks/useTable.ts
-
src/components/Table/src/types/table.ts
-
src/views/demo/table/RefTable.vue
-
src/views/demo/table/UseTable.vue
|
|
|
@ -127,6 +127,7 @@ |
|
|
|
handleTableChange: onTableChange, |
|
|
|
getDataSourceRef, |
|
|
|
getDataSource, |
|
|
|
getRawDataSource, |
|
|
|
setTableData, |
|
|
|
updateTableDataRecord, |
|
|
|
findTableDataRecord, |
|
|
|
@ -273,6 +274,7 @@ |
|
|
|
setColumns, |
|
|
|
setLoading, |
|
|
|
getDataSource, |
|
|
|
getRawDataSource, |
|
|
|
setProps, |
|
|
|
getRowSelection, |
|
|
|
getPaginationRef: getPagination, |
|
|
|
|
|
|
|
@ -47,6 +47,7 @@ export function useDataSource( |
|
|
|
filterInfo: {}, |
|
|
|
}); |
|
|
|
const dataSourceRef = ref<Recordable[]>([]); |
|
|
|
const rawDataSourceRef = ref<Recordable>({}); |
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
tableData.value = unref(dataSourceRef); |
|
|
|
@ -235,6 +236,7 @@ export function useDataSource( |
|
|
|
} |
|
|
|
|
|
|
|
const res = await api(params); |
|
|
|
rawDataSourceRef.value = res; |
|
|
|
|
|
|
|
const isArrayResult = Array.isArray(res); |
|
|
|
|
|
|
|
@ -287,6 +289,10 @@ export function useDataSource( |
|
|
|
return getDataSourceRef.value as T[]; |
|
|
|
} |
|
|
|
|
|
|
|
function getRawDataSource<T = Recordable>() { |
|
|
|
return rawDataSourceRef.value as T; |
|
|
|
} |
|
|
|
|
|
|
|
async function reload(opt?: FetchParams) { |
|
|
|
await fetch(opt); |
|
|
|
} |
|
|
|
@ -300,6 +306,7 @@ export function useDataSource( |
|
|
|
return { |
|
|
|
getDataSourceRef, |
|
|
|
getDataSource, |
|
|
|
getRawDataSource, |
|
|
|
getRowKey, |
|
|
|
setTableData, |
|
|
|
getAutoCreateKey, |
|
|
|
|
|
|
|
@ -82,6 +82,9 @@ export function useTable(tableProps?: Props): [ |
|
|
|
getDataSource: () => { |
|
|
|
return getTableInstance().getDataSource(); |
|
|
|
}, |
|
|
|
getRawDataSource: () => { |
|
|
|
return getTableInstance().getRawDataSource(); |
|
|
|
}, |
|
|
|
getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => { |
|
|
|
const columns = getTableInstance().getColumns({ ignoreIndex }) || []; |
|
|
|
return toRaw(columns); |
|
|
|
|
|
|
|
@ -99,6 +99,7 @@ export interface TableActionType { |
|
|
|
getColumns: (opt?: GetColumnsParams) => BasicColumn[]; |
|
|
|
setColumns: (columns: BasicColumn[] | string[]) => void; |
|
|
|
getDataSource: <T = Recordable>() => T[]; |
|
|
|
getRawDataSource: <T = Recordable>() => T; |
|
|
|
setLoading: (loading: boolean) => void; |
|
|
|
setProps: (props: Partial<BasicTableProps>) => void; |
|
|
|
redoHeight: () => void; |
|
|
|
|
|
|
|
@ -6,6 +6,7 @@ |
|
|
|
<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="getTableRawData"> 获取接口原始数据 </a-button> |
|
|
|
<a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button> |
|
|
|
</div> |
|
|
|
<div class="mb-4"> |
|
|
|
@ -71,6 +72,10 @@ |
|
|
|
createMessage.info('请在控制台查看!'); |
|
|
|
console.log(getTableAction().getDataSource()); |
|
|
|
} |
|
|
|
function getTableRawData() { |
|
|
|
createMessage.info('请在控制台查看!'); |
|
|
|
console.log(getTableAction().getRawDataSource()); |
|
|
|
} |
|
|
|
|
|
|
|
function getPagination() { |
|
|
|
createMessage.info('请在控制台查看!'); |
|
|
|
@ -107,6 +112,7 @@ |
|
|
|
reloadTable, |
|
|
|
getColumn, |
|
|
|
getTableData, |
|
|
|
getTableRawData, |
|
|
|
getPagination, |
|
|
|
setPaginationInfo, |
|
|
|
getSelectRowList, |
|
|
|
|
|
|
|
@ -6,6 +6,7 @@ |
|
|
|
<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="getTableRawData"> 获取接口原始数据 </a-button> |
|
|
|
<a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button> |
|
|
|
</div> |
|
|
|
<div class="mb-4"> |
|
|
|
@ -38,6 +39,7 @@ |
|
|
|
setColumns, |
|
|
|
getColumns, |
|
|
|
getDataSource, |
|
|
|
getRawDataSource, |
|
|
|
reload, |
|
|
|
getPaginationRef, |
|
|
|
setPagination, |
|
|
|
@ -89,6 +91,11 @@ |
|
|
|
console.log(getDataSource()); |
|
|
|
} |
|
|
|
|
|
|
|
function getTableRawData() { |
|
|
|
createMessage.info('请在控制台查看!'); |
|
|
|
console.log(getRawDataSource()); |
|
|
|
} |
|
|
|
|
|
|
|
function getPagination() { |
|
|
|
createMessage.info('请在控制台查看!'); |
|
|
|
console.log(getPaginationRef()); |
|
|
|
@ -122,6 +129,7 @@ |
|
|
|
reloadTable, |
|
|
|
getColumn, |
|
|
|
getTableData, |
|
|
|
getTableRawData, |
|
|
|
getPagination, |
|
|
|
setPaginationInfo, |
|
|
|
getSelectRowList, |
|
|
|
|