-
Notifications
You must be signed in to change notification settings - Fork 140
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
…1444) add `onSearch` for to make server-side searching possible
- Loading branch information
Showing
15 changed files
with
276 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 42 | ||
title: | ||
zh: 服务端搜索 | ||
en: Server-side searching | ||
--- | ||
|
||
## zh | ||
|
||
`'select'`,`'treeSelect'` 类型搜索项支持服务端搜索。 | ||
|
||
## en | ||
|
||
Server-side searching is supported under field type of `'select'`, `'treeSelect'`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
<template> | ||
<IxProSearch | ||
v-model:value="value" | ||
style="width: 100%" | ||
:searchFields="searchFields" | ||
:onChange="onChange" | ||
:onSearch="onSearch" | ||
></IxProSearch> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import type { SearchField, SearchValue } from '@idux/pro/search' | ||
import { computed, ref } from 'vue' | ||
import { filterTree } from '@idux/cdk/utils' | ||
interface SelectData { | ||
key: number | ||
label: string | ||
} | ||
interface TreeSelectData { | ||
key: string | ||
label: string | ||
children?: TreeSelectData[] | ||
} | ||
const labels = ['Archer', 'Berserker', 'Lancer', 'Rider', 'Saber', 'Caster', 'Assassin'] | ||
const baseSelectData: SelectData[] = Array.from(new Array(50)).map((_, idx) => { | ||
const label = `${labels[idx % labels.length]}-${Math.ceil(idx / labels.length)}` | ||
return { | ||
key: idx, | ||
label, | ||
} | ||
}) | ||
const baseTreeSelectData: TreeSelectData[] = Array.from(new Array(20)).map((_, idx) => { | ||
const label = labels[idx % labels.length] | ||
return { | ||
key: `${idx}`, | ||
label: `${label} ${idx}`, | ||
children: [ | ||
{ | ||
label: `${label} ${idx}-0`, | ||
key: `${idx}-0`, | ||
children: [ | ||
{ | ||
label: `${label} ${idx}-0-0`, | ||
key: `${idx}-0-0`, | ||
}, | ||
{ | ||
label: `${label} ${idx}-0-1`, | ||
key: `${idx}-0-1`, | ||
}, | ||
], | ||
}, | ||
{ | ||
label: `${label} ${idx}-1`, | ||
key: `${idx}-1`, | ||
children: [ | ||
{ label: `${label} ${idx}-1-0`, key: `${idx}-1-0` }, | ||
{ label: `${label} ${idx}-1-1`, key: `${idx}-1-1` }, | ||
], | ||
}, | ||
], | ||
} | ||
}) | ||
const createSelectData = (searchValue: string) => { | ||
return baseSelectData.filter(item => new RegExp(searchValue.toLowerCase()).test(item.label.toLowerCase())) | ||
} | ||
const createTreeSelectData = (searchValue: string) => { | ||
return filterTree(baseTreeSelectData, 'children', item => | ||
new RegExp(searchValue.toLowerCase()).test(item.label.toLowerCase()), | ||
) | ||
} | ||
const value = ref<SearchValue[]>() | ||
const selectData = ref<SelectData[]>(createSelectData('')) | ||
const treeSelectData = ref<TreeSelectData[]>(createTreeSelectData('')) | ||
const selectOnSearch = (searchValue: string) => { | ||
selectData.value = createSelectData(searchValue) | ||
} | ||
const treeSelectOnSearch = (searchValue: string) => { | ||
treeSelectData.value = createTreeSelectData(searchValue) | ||
} | ||
const searchFields = computed<SearchField[]>(() => [ | ||
{ | ||
type: 'select', | ||
label: 'Select Data', | ||
key: 'Select Data', | ||
fieldConfig: { | ||
multiple: true, | ||
searchable: true, | ||
dataSource: selectData.value, | ||
searchFn: () => true, | ||
onSearch: selectOnSearch, | ||
}, | ||
}, | ||
{ | ||
type: 'treeSelect', | ||
label: 'Tree Data', | ||
key: 'tree_data', | ||
fieldConfig: { | ||
multiple: true, | ||
searchable: true, | ||
checkable: true, | ||
cascaderStrategy: 'all', | ||
dataSource: treeSelectData.value, | ||
searchFn: () => true, | ||
onSearch: treeSelectOnSearch, | ||
}, | ||
}, | ||
]) | ||
const onChange = (value: SearchValue[] | undefined, oldValue: SearchValue[] | undefined) => { | ||
console.log(value, oldValue) | ||
} | ||
const onSearch = () => { | ||
console.log('onSearch') | ||
} | ||
</script> | ||
|
||
<style scoped lang="less"></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.