Commit 8e4f486fcf835f0b6f2a95676dba268ffdd0566e
1 parent
5212ea79
feat(table): add updateTableDataRecord method
添加updateTableDataRecord以便可以根据指定的rowKey来直接更新行数据而无需reload
Showing
4 changed files
with
27 additions
and
0 deletions
src/components/Table/src/BasicTable.vue
@@ -129,6 +129,7 @@ | @@ -129,6 +129,7 @@ | ||
129 | getDataSourceRef, | 129 | getDataSourceRef, |
130 | getDataSource, | 130 | getDataSource, |
131 | setTableData, | 131 | setTableData, |
132 | + updateTableDataRecord, | ||
132 | fetch, | 133 | fetch, |
133 | getRowKey, | 134 | getRowKey, |
134 | reload, | 135 | reload, |
@@ -265,6 +266,7 @@ | @@ -265,6 +266,7 @@ | ||
265 | deleteSelectRowByKey, | 266 | deleteSelectRowByKey, |
266 | setPagination, | 267 | setPagination, |
267 | setTableData, | 268 | setTableData, |
269 | + updateTableDataRecord, | ||
268 | redoHeight, | 270 | redoHeight, |
269 | setSelectedRowKeys, | 271 | setSelectedRowKeys, |
270 | setColumns, | 272 | setColumns, |
src/components/Table/src/hooks/useDataSource.ts
@@ -149,6 +149,26 @@ export function useDataSource( | @@ -149,6 +149,26 @@ export function useDataSource( | ||
149 | return dataSourceRef.value[index]; | 149 | return dataSourceRef.value[index]; |
150 | } | 150 | } |
151 | 151 | ||
152 | + function updateTableDataRecord( | ||
153 | + rowKey: string | number, | ||
154 | + record: Recordable | ||
155 | + ): Recordable | undefined { | ||
156 | + if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; | ||
157 | + const rowKeyName = unref(getRowKey); | ||
158 | + if (typeof rowKeyName !== 'string') { | ||
159 | + return; | ||
160 | + } | ||
161 | + const row = dataSourceRef.value.find( | ||
162 | + (r) => Reflect.has(r, rowKeyName as string) && r[rowKeyName as string] === rowKey | ||
163 | + ); | ||
164 | + if (row) { | ||
165 | + for (const field in row) { | ||
166 | + if (Reflect.has(record, field)) row[field] = record[field]; | ||
167 | + } | ||
168 | + return row; | ||
169 | + } | ||
170 | + } | ||
171 | + | ||
152 | async function fetch(opt?: FetchParams) { | 172 | async function fetch(opt?: FetchParams) { |
153 | const { api, searchInfo, fetchSetting, beforeFetch, afterFetch, useSearchForm, pagination } = | 173 | const { api, searchInfo, fetchSetting, beforeFetch, afterFetch, useSearchForm, pagination } = |
154 | unref(propsRef); | 174 | unref(propsRef); |
@@ -255,6 +275,7 @@ export function useDataSource( | @@ -255,6 +275,7 @@ export function useDataSource( | ||
255 | fetch, | 275 | fetch, |
256 | reload, | 276 | reload, |
257 | updateTableData, | 277 | updateTableData, |
278 | + updateTableDataRecord, | ||
258 | handleTableChange, | 279 | handleTableChange, |
259 | }; | 280 | }; |
260 | } | 281 | } |
src/components/Table/src/hooks/useTable.ts
@@ -120,6 +120,9 @@ export function useTable(tableProps?: Props): [ | @@ -120,6 +120,9 @@ export function useTable(tableProps?: Props): [ | ||
120 | updateTableData: (index: number, key: string, value: any) => { | 120 | updateTableData: (index: number, key: string, value: any) => { |
121 | return getTableInstance().updateTableData(index, key, value); | 121 | return getTableInstance().updateTableData(index, key, value); |
122 | }, | 122 | }, |
123 | + updateTableDataRecord: (rowKey: string | number, record: Recordable) => { | ||
124 | + return getTableInstance().updateTableDataRecord(rowKey, record); | ||
125 | + }, | ||
123 | getRowSelection: () => { | 126 | getRowSelection: () => { |
124 | return toRaw(getTableInstance().getRowSelection()); | 127 | return toRaw(getTableInstance().getRowSelection()); |
125 | }, | 128 | }, |
src/components/Table/src/types/table.ts
@@ -94,6 +94,7 @@ export interface TableActionType { | @@ -94,6 +94,7 @@ export interface TableActionType { | ||
94 | deleteSelectRowByKey: (key: string) => void; | 94 | deleteSelectRowByKey: (key: string) => void; |
95 | setPagination: (info: Partial<PaginationProps>) => void; | 95 | setPagination: (info: Partial<PaginationProps>) => void; |
96 | setTableData: <T = Recordable>(values: T[]) => void; | 96 | setTableData: <T = Recordable>(values: T[]) => void; |
97 | + updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void; | ||
97 | getColumns: (opt?: GetColumnsParams) => BasicColumn[]; | 98 | getColumns: (opt?: GetColumnsParams) => BasicColumn[]; |
98 | setColumns: (columns: BasicColumn[] | string[]) => void; | 99 | setColumns: (columns: BasicColumn[] | string[]) => void; |
99 | getDataSource: <T = Recordable>() => T[]; | 100 | getDataSource: <T = Recordable>() => T[]; |