Commit 1dc6faf3e638d1fd61097c5b7df9e2006a60faa2

Authored by George Tan
Committed by GitHub
1 parent 598ce5a1

feat(table component): add 'expandRows' table action (#1537)

* fix(table component): add 'expandRows'

* feat(table component): add 'expandRows' table action
src/components/Table/src/BasicTable.vue
@@ -199,7 +199,11 @@ @@ -199,7 +199,11 @@
199 199
200 const { getRowClassName } = useTableStyle(getProps, prefixCls); 200 const { getRowClassName } = useTableStyle(getProps, prefixCls);
201 201
202 - const { getExpandOption, expandAll, collapseAll } = useTableExpand(getProps, tableData, emit); 202 + const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand(
  203 + getProps,
  204 + tableData,
  205 + emit,
  206 + );
203 207
204 const handlers: InnerHandlers = { 208 const handlers: InnerHandlers = {
205 onColumnsChange: (data: ColumnChangeParam[]) => { 209 onColumnsChange: (data: ColumnChangeParam[]) => {
@@ -300,6 +304,7 @@ @@ -300,6 +304,7 @@
300 getShowPagination, 304 getShowPagination,
301 setCacheColumnsByField, 305 setCacheColumnsByField,
302 expandAll, 306 expandAll,
  307 + expandRows,
303 collapseAll, 308 collapseAll,
304 scrollTo, 309 scrollTo,
305 getSize: () => { 310 getSize: () => {
src/components/Table/src/hooks/useTable.ts
@@ -152,6 +152,9 @@ export function useTable(tableProps?: Props): [ @@ -152,6 +152,9 @@ export function useTable(tableProps?: Props): [
152 expandAll: () => { 152 expandAll: () => {
153 getTableInstance().expandAll(); 153 getTableInstance().expandAll();
154 }, 154 },
  155 + expandRows: (keys: string[]) => {
  156 + getTableInstance().expandRows(keys);
  157 + },
155 collapseAll: () => { 158 collapseAll: () => {
156 getTableInstance().collapseAll(); 159 getTableInstance().collapseAll();
157 }, 160 },
src/components/Table/src/hooks/useTableExpand.ts
@@ -37,6 +37,13 @@ export function useTableExpand( @@ -37,6 +37,13 @@ export function useTableExpand(
37 expandedRowKeys.value = keys; 37 expandedRowKeys.value = keys;
38 } 38 }
39 39
  40 + function expandRows(keys: string[]) {
  41 + // use row ID expands the specified table row
  42 + const { isTreeTable } = unref(propsRef);
  43 + if (!isTreeTable) return;
  44 + expandedRowKeys.value = [...expandedRowKeys.value, ...keys];
  45 + }
  46 +
40 function getAllKeys(data?: Recordable[]) { 47 function getAllKeys(data?: Recordable[]) {
41 const keys: string[] = []; 48 const keys: string[] = [];
42 const { childrenColumnName } = unref(propsRef); 49 const { childrenColumnName } = unref(propsRef);
@@ -54,5 +61,5 @@ export function useTableExpand( @@ -54,5 +61,5 @@ export function useTableExpand(
54 expandedRowKeys.value = []; 61 expandedRowKeys.value = [];
55 } 62 }
56 63
57 - return { getExpandOption, expandAll, collapseAll }; 64 + return { getExpandOption, expandAll, expandRows, collapseAll };
58 } 65 }
src/components/Table/src/types/table.ts
@@ -87,6 +87,7 @@ export interface TableActionType { @@ -87,6 +87,7 @@ export interface TableActionType {
87 getSelectRows: <T = Recordable>() => T[]; 87 getSelectRows: <T = Recordable>() => T[];
88 clearSelectedRowKeys: () => void; 88 clearSelectedRowKeys: () => void;
89 expandAll: () => void; 89 expandAll: () => void;
  90 + expandRows: (keys: string[]) => void;
90 collapseAll: () => void; 91 collapseAll: () => void;
91 scrollTo: (pos: string) => void; // pos: id | "top" | "bottom" 92 scrollTo: (pos: string) => void; // pos: id | "top" | "bottom"
92 getSelectRowKeys: () => string[]; 93 getSelectRowKeys: () => string[];