feat(table): add expandAllRows method

Author: kagol

packages/devui-vue/devui/table/src/store/index.ts

@@ -175,12 +175,18 @@ const createExpandRow = <T>(dataSource: Ref<T[]>, trackBy: (item: T) => string)
  return dataSource.value.filter((item) => isRowExpanded(item));
  };
 
+ const expandAllRows = (): void => {
+ dataSource.value.forEach(item => {
+ _expandedRows.value.add(trackBy(item));
+ });
+ };
 
  return {
  _expandedRows,
  toggleRow,
  isRowExpanded,
  getExpandedRows,
+ expandAllRows,
  };
 };
 
@@ -215,7 +221,13 @@ export function createStore<T>(dataSource: Ref<T[]>, table: Table<DefaultRow>):
  const { sortData, thList } = createSorter(dataSource, _data);
 
  const { isFixedLeft } = createFixedLogic(_columns);
- const { _expandedRows, toggleRow, isRowExpanded, getExpandedRows } = createExpandRow(dataSource, table.props.trackBy as (v: T) => string);
+ const {
+ _expandedRows,
+ toggleRow,
+ isRowExpanded,
+ getExpandedRows,
+ expandAllRows
+ } = createExpandRow(dataSource, table.props.trackBy as (v: T) => string);
 
  return {
  _table: table,
@@ -238,6 +250,7 @@ export function createStore<T>(dataSource: Ref<T[]>, table: Table<DefaultRow>):
  toggleRow,
  isRowExpanded,
  getExpandedRows,
+ expandAllRows,
  sortData,
  isRowChecked,
  checkRow,

packages/devui-vue/devui/table/src/store/store-types.ts

@@ -25,5 +25,6 @@ export interface TableStore<T = Record<string, any>> {
  checkRow(toggle: boolean, row: T): void;
  toggleRow(row: T): void;
  isRowExpanded(row: T): boolean;
- getExpandedRows(): T;
+ getExpandedRows(): T[];
+ expandAllRows(): void;
 }

packages/devui-vue/devui/table/src/table.tsx

@@ -38,6 +38,9 @@ export default defineComponent({
  getCheckedRows() {
  return store.getCheckedRows();
  },
+ expandAllRows() {
+ store.expandAllRows();
+ },
  });
 
  onMounted(async () => {

packages/devui-vue/docs/components/table/index.md

@@ -1051,7 +1051,7 @@ export default defineComponent({
 
 ```vue
 <template>
- <d-table :data="dataSource" :trackBy="(item) => item?.firstName" @expand-change="expandChange">
+ <d-table ref="tableRef" :data="dataSource" :trackBy="(item) => item?.firstName" @expand-change="expandChange">
  <d-column type="expand">
  <template #default="rowData">
  <div>First Name: {{rowData.row.firstName}}</div>
@@ -1068,10 +1068,12 @@ export default defineComponent({
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, onMounted } from 'vue';
 
 export default defineComponent({
  setup() {
+ const tableRef = ref();
+
  const dataSource = ref([
  {
  firstName: 'Jacob',
@@ -1099,11 +1101,15 @@ export default defineComponent({
  },
  ]);
 
+ onMounted(() => {
+ tableRef.value.expandAllRows();
+ });
+
  const expandChange = (currentRow, expandedRows) => {
  console.log('currentRow, expandedRows', currentRow, expandedRows);
  }
 
- return { dataSource, expandChange };
+ return { dataSource, expandChange, tableRef };
  },
 });
 </script>