feat(comp:cascader): add separator prop

IDuxFE · Jan 12, 2023 · 8ce11e9 · 8ce11e9
1 parent 29b6128
commit 8ce11e9
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 19 deletions.
diff --git a/packages/components/cascader/docs/Api.zh.md b/packages/components/cascader/docs/Api.zh.md
@@ -38,6 +38,7 @@
 | `readonly` | 只读模式 | `boolean` | - | - | - |
 | `searchable` | 是否可搜索 | `boolean \| 'overlay'` | `false` | - | 当为 `true` 时搜索功能集成在选择器上，当为 `overlay` 时，搜索功能集成在悬浮层上 |
 | `searchFn` | 根据搜索的文本进行筛选 | `boolean \| SelectSearchFn` | `true` | - | 为 `true` 时使用默认的搜索规则, 如果使用远程搜索，应该设置为 `false` |
+| `separator` | 设置分割符 | `string` | `/` | - | - |
 | `size` | 设置选择器大小 | `'sm' \| 'md' \| 'lg'` | `md` | ✅ | - |
 | `status` | 手动指定校验状态 | `valid \| invalid \| validating` | - | - | - |
 | `strategy` | 设置级联策略 | `'all' \| 'parent' \| 'child' \| 'off'` | `'all'` | - | 具体用法参见 [级联策略](#components-cascader-demo-Strategy) |

diff --git a/packages/components/cascader/src/Cascader.tsx b/packages/components/cascader/src/Cascader.tsx
@@ -70,7 +70,14 @@ export default defineComponent({
     )
     const activeStateContext = useActiveState(props, mergedDataMap)
     const selectedStateContext = useSelectedState(props, accessor, mergedDataMap, mergedFullPath, mergedGetDisabled)
-    const { searchedData } = useSearchable(props, mergedLabelKey, mergedDataMap, inputValue, mergedGetDisabled)
+    const { searchedData } = useSearchable(
+      props,
+      mergedData,
+      mergedDataMap,
+      mergedLabelKey,
+      inputValue,
+      mergedGetDisabled,
+    )
     const expandableContext = useExpandable(
       props,
       mergedGetKey,

diff --git a/packages/components/cascader/src/composables/useDataSource.ts b/packages/components/cascader/src/composables/useDataSource.ts
@@ -65,9 +65,9 @@ export function convertMergedData(
   parentKey?: VKey,
   parentLabel?: string,
 ): MergedData[] {
-  const { loadChildren } = props
+  const { loadChildren, separator } = props
   return data.map(item =>
-    convertMergedItem(item, getKey, childrenKey, labelKey, fullPath, !!loadChildren, parentKey, parentLabel),
+    convertMergedItem(item, getKey, childrenKey, labelKey, separator, fullPath, !!loadChildren, parentKey, parentLabel),
   )
 }
 
@@ -76,16 +76,19 @@ function convertMergedItem(
   getKey: GetKeyFn,
   childrenKey: string,
   labelKey: string,
+  separator: string,
   fullPath: boolean,
   hasLoad: boolean,
   parentKey?: VKey,
   parentLabel?: string,
 ): MergedData {
   const key = getKey(rawData)
-  const label = (fullPath && !isNil(parentLabel) ? `${parentLabel}/${rawData[labelKey]}` : rawData[labelKey]) as string
+  const label = (
+    fullPath && !isNil(parentLabel) ? `${parentLabel}${separator}${rawData[labelKey]}` : rawData[labelKey]
+  ) as string
   const subData = rawData[childrenKey] as CascaderData[] | undefined
   const children = subData?.map(item =>
-    convertMergedItem(item, getKey, childrenKey, labelKey, fullPath, hasLoad, key, label),
+    convertMergedItem(item, getKey, childrenKey, labelKey, separator, fullPath, hasLoad, key, label),
   )
   return {
     children,

diff --git a/packages/components/cascader/src/composables/useSearchable.ts b/packages/components/cascader/src/composables/useSearchable.ts
@@ -21,8 +21,9 @@ export interface SearchableContext {
 
 export function useSearchable(
   props: CascaderProps,
-  mergedLabelKey: ComputedRef<string>,
+  mergedData: ComputedRef<MergedData[]>,
   mergedDataMap: ComputedRef<Map<VKey, MergedData>>,
+  mergedLabelKey: ComputedRef<string>,
   inputValue: ComputedRef<string>,
   mergedGetDisabled: ComputedRef<GetDisabledFn>,
 ): SearchableContext {
@@ -38,18 +39,7 @@ export function useSearchable(
     const _parentEnabled = parentEnabled.value
     const getDisabledFn = mergedGetDisabled.value
     const keySet = new Set<VKey>()
-    mergedDataMap.value.forEach(data => {
-      const { key, rawData } = data
-      if (keySet.has(key)) {
-        return
-      }
-      if (searchFn(rawData, searchValue)) {
-        if (_parentEnabled || data.isLeaf) {
-          keySet.add(key)
-        }
-        processChildren(keySet, data, _parentEnabled, getDisabledFn)
-      }
-    })
+    mergedData.value.forEach(data => doSearch(keySet, data, searchFn, searchValue, _parentEnabled, getDisabledFn))
     return [...keySet]
   })
 
@@ -78,13 +68,35 @@ function getDefaultSearchFn(labelKey: string): CascaderSearchFn {
   }
 }
 
+function doSearch(
+  keySet: Set<VKey>,
+  data: MergedData,
+  searchFn: CascaderSearchFn,
+  searchValue: string,
+  _parentEnabled: boolean,
+  getDisabledFn: GetDisabledFn,
+) {
+  const { key, rawData } = data
+  if (keySet.has(key) || getDisabledFn(rawData)) {
+    return
+  }
+  if (searchFn(rawData, searchValue)) {
+    if (_parentEnabled || data.isLeaf) {
+      keySet.add(key)
+    }
+    processChildren(keySet, data, _parentEnabled, getDisabledFn)
+  } else if (data.children) {
+    data.children.forEach(child => doSearch(keySet, child, searchFn, searchValue, _parentEnabled, getDisabledFn))
+  }
+}
+
 function processChildren(keySet: Set<VKey>, data: MergedData, parentEnabled: boolean, getDisabledFn: GetDisabledFn) {
   if (!data || !data.children) {
     return
   }
 
   data.children.forEach(child => {
-    if (getDisabledFn(child.rawData) || keySet.has(child.key)) {
+    if (keySet.has(child.key) || getDisabledFn(child.rawData)) {
       return
     }
 

diff --git a/packages/components/cascader/src/types.ts b/packages/components/cascader/src/types.ts
@@ -55,6 +55,7 @@ export const cascaderProps = {
   readonly: { type: Boolean, default: false },
   searchable: { type: [Boolean, String] as PropType<boolean | 'overlay'>, default: false },
   searchFn: { type: [Boolean, Function] as PropType<boolean | CascaderSearchFn>, default: true },
+  separator: { type: String, default: '/' },
   size: { type: String as PropType<FormSize>, default: undefined },
   status: String as PropType<ValidateStatus>,
   strategy: { type: String as PropType<CascaderStrategy>, default: 'all' },