From 37d35f7801de5780c40534dadd2cccbab37ffa11 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sun, 22 May 2022 14:23:53 +0800 Subject: [PATCH] feat: table add filterResetToDefaultFilteredValue & filterSearch funcion --- components/table/demo/filter-search.vue | 113 ++++++++++++++++++ components/table/demo/index.vue | 3 + .../table/hooks/useFilter/FilterDropdown.tsx | 22 +++- .../table/hooks/useFilter/FilterSearch.tsx | 4 +- components/table/hooks/useFilter/index.tsx | 22 ++-- components/table/hooks/useSorter.tsx | 32 ++++- components/table/index.en-US.md | 3 +- components/table/index.zh-CN.md | 3 +- components/table/interface.tsx | 9 +- components/table/style/index.less | 8 +- components/table/style/size.less | 15 +-- 11 files changed, 195 insertions(+), 39 deletions(-) create mode 100644 components/table/demo/filter-search.vue diff --git a/components/table/demo/filter-search.vue b/components/table/demo/filter-search.vue new file mode 100644 index 000000000..4921f51c5 --- /dev/null +++ b/components/table/demo/filter-search.vue @@ -0,0 +1,113 @@ + +--- +order: 6.2 +version: 4.19.0 +title: + en-US: Filter search + zh-CN: 自定义筛选的搜索 +--- + +## zh-CN + +`filterSearch` 用于开启筛选项的搜索，通过 `filterSearch:(input, record) => boolean` 设置自定义筛选方法 + +## en-US + +`filterSearch` is used to enable search of filter items, and you can set a custom filter method through `filterSearch:(input, record) => boolean`. + + + + + diff --git a/components/table/demo/index.vue b/components/table/demo/index.vue index 5b9dec805..8c7efd643 100644 --- a/components/table/demo/index.vue +++ b/components/table/demo/index.vue @@ -18,6 +18,7 @@ + @@ -61,6 +62,7 @@ import Summary from './summary.vue'; import Sticky from './sticky.vue'; import ResizableColumn from './resizable-column.vue'; import Responsive from './responsive.vue'; +import filterSearchVue from './filter-search.vue'; import CN from '../index.zh-CN.md'; import US from '../index.en-US.md'; import { defineComponent } from 'vue'; @@ -69,6 +71,7 @@ export default defineComponent({ CN, US, components: { + filterSearchVue, Basic, Ellipsis, Ajax, diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index dac924de6..b9cd29d1e 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -108,11 +108,12 @@ export interface FilterDropdownProps { filterState?: FilterState; filterMultiple: boolean; filterMode?: 'menu' | 'tree'; - filterSearch?: boolean; + filterSearch?: FilterSearchType; columnKey: Key; triggerFilter: (filterState: FilterState) => void; locale: TableLocale; getPopupContainer?: GetPopupContainer; + filterResetToDefaultFilteredValue?: boolean; } export default defineComponent>({ @@ -266,7 +267,11 @@ export default defineComponent>({ triggerVisible(false); } searchValue.value = ''; - filteredKeys.value = []; + if (props.column.filterResetToDefaultFilteredValue) { + filteredKeys.value = (props.column.defaultFilteredValue || []).map(key => String(key)); + } else { + filteredKeys.value = []; + } }; const doFilter = ({ closeDropdown } = { closeDropdown: true }) => { @@ -432,7 +437,17 @@ export default defineComponent>({ ); }; + const resetDisabled = computed(() => { + const selectedKeys = filteredKeys.value; + if (props.column.filterResetToDefaultFilteredValue) { + return isEqual( + (props.column.defaultFilteredValue || []).map(key => String(key)), + selectedKeys, + ); + } + return selectedKeys.length === 0; + }); return () => { const { tablePrefixCls, prefixCls, column, dropdownPrefixCls, locale, getPopupContainer } = props; @@ -453,7 +468,6 @@ export default defineComponent>({ } else if (filterDropdownRef.value) { dropdownContent = filterDropdownRef.value; } else { - const selectedKeys = filteredKeys.value as any; dropdownContent = ( <> {getFilterComponent()} @@ -461,7 +475,7 @@ export default defineComponent>({