feat(pro:search): tree field supports defaultExpandedKeys (#1728)

IDuxFE · Oct 30, 2023 · 8120fdf · 8120fdf
1 parent 0d306ac
commit 8120fdf
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 1 deletion.
diff --git a/packages/pro/search/demo/Basic.vue b/packages/pro/search/demo/Basic.vue
@@ -103,6 +103,7 @@ const searchFields: SearchField[] = [
       searchable: true,
       checkable: true,
       cascaderStrategy: 'all',
+      defaultExpandedKeys: ['0'],
       dataSource: [
         {
           label: 'Node 0',

diff --git a/packages/pro/search/docs/Api.zh.md b/packages/pro/search/docs/Api.zh.md
@@ -149,6 +149,7 @@ TreeSelectSearchFieldConfig
 | `draggableIcon` | 拖拽图标 | `string` | - | - | 详情参考[Tree](/components/tree/zh) |
 | `customDraggableIcon` | 拖拽图标自定义渲染 | `string \| () => VNodeChild` | - | - | 值为string时为对应名称的插槽 |
 | `expandIcon` | 展开收起图标 | `string \| TreeExpandIconRenderer \| [string, string]` | - | - | 详情参考[Tree](/components/tree/zh) |
+| `defaultExpandedKeys` | 默认展开的节点Key | `VKey[]` | - | - | - |
 | `customExpandIcon` | 展开收起图标自定义渲染 | `string \| TreeExpandIconRenderer` | - | - | 值为string时为对应名称的插槽 |
 | `showLine` | 是否展示连线 | `boolean` | - | - | 详情参考[Tree](/components/tree/zh) |
 | `searchable` | 是否支持筛选 | `boolean` | `false` | - | 默认不支持 |

diff --git a/packages/pro/search/src/panel/TreeSelectPanel.tsx b/packages/pro/search/src/panel/TreeSelectPanel.tsx
@@ -173,7 +173,7 @@ function useExpandedKeys(props: ProSearchTreeSelectPanelProps): {
   expandedKeys: ComputedRef<VKey[]>
   setExpandedKeys: (keys: VKey[]) => void
 } {
-  const initialExpandedKeySet = new Set<VKey>()
+  const initialExpandedKeySet = new Set<VKey>(props.defaultExpandedKeys ?? [])
   props.dataSource &&
     traverseTree(props.dataSource, 'children', (item, parents) => {
       if (props.value?.includes(item.key)) {

diff --git a/packages/pro/search/src/segments/CreateTreeSelectSegment.tsx b/packages/pro/search/src/segments/CreateTreeSelectSegment.tsx
@@ -26,6 +26,7 @@ export function createTreeSelectSegment(
     cascaderStrategy,
     draggable,
     draggableIcon,
+    defaultExpandedKeys,
     customDraggableIcon,
     expandIcon,
     customExpandIcon,
@@ -78,6 +79,7 @@ export function createTreeSelectSegment(
         dataSource={dataSource}
         draggable={draggable}
         draggableIcon={draggableIcon}
+        defaultExpandedKeys={defaultExpandedKeys}
         checkable={checkable}
         cascaderStrategy={cascaderStrategy}
         expandIcon={expandIcon}

diff --git a/packages/pro/search/src/types/panels.ts b/packages/pro/search/src/types/panels.ts
@@ -59,6 +59,7 @@ export const proSearchTreeSelectPanelProps = {
   draggable: { type: Boolean, default: false },
   draggableIcon: { type: String, default: undefined },
   droppable: { type: Function as PropType<TreeDroppable>, default: undefined },
+  defaultExpandedKeys: { type: Array as PropType<VKey[]>, default: undefined },
 
   expandIcon: { type: [String, Array] as PropType<string | [string, string]>, default: undefined },
   loadChildren: {

diff --git a/packages/pro/search/src/types/searchFields.ts b/packages/pro/search/src/types/searchFields.ts
@@ -76,6 +76,7 @@ interface TreeSelectSearchFieldBase {
     draggableIcon?: string
     customDraggableIcon?: string | (() => VNodeChild)
     expandIcon?: string | [string, string]
+    defaultExpandedKeys?: VKey[]
     customExpandIcon?: string | ((options: { key: VKey; expanded: boolean; node: TreeSelectPanelData }) => VNodeChild)
     showLine?: boolean
     searchable?: boolean