diff --git a/demo/documentation/components/dataTable/enUS/controlledFilter.md b/demo/documentation/components/dataTable/enUS/controlledFilter.md index 18a0c962c..d90e9f975 100644 --- a/demo/documentation/components/dataTable/enUS/controlledFilter.md +++ b/demo/documentation/components/dataTable/enUS/controlledFilter.md @@ -96,9 +96,8 @@ export default { this.addressColumn.filterOptionValues = [] }, handleFiltersChange (filters, sourceColumn) { - this.addressColumn.filterOptionValues = filters.filter( - filter => filter.columnKey === sourceColumn.key - ).map(filter => filter.filterOptionValue) + console.log(filters, sourceColumn) + this.addressColumn.filterOptionValues = filters[sourceColumn.key] } } } diff --git a/demo/documentation/components/dataTable/enUS/index.md b/demo/documentation/components/dataTable/enUS/index.md index 7d6d15fdc..1766226d1 100644 --- a/demo/documentation/components/dataTable/enUS/index.md +++ b/demo/documentation/components/dataTable/enUS/index.md @@ -55,7 +55,7 @@ These methods can help you control table in an uncontrolled manner. However, it' |Name|Type|Description| |-|-|-| -|filters|`( columnKey: string \| number, filterOptionValue: string \| number } \| Array<{ columnKey: string \| number, filterOptionValue: string \| number }>)`|| +|filters|`({(string \| number): Array })`|Key is the key of the column, value is the filterOptionValues.| |sort|`(columnKey: string \| null, order: 'ascend' \| 'descend' \| false)`|If columnKey set to `null`, it is same as clearSorter| |page|`(page: number) => void`|| |clearFilters|`() => void`|| @@ -65,7 +65,7 @@ These methods can help you control table in an uncontrolled manner. However, it' ## Events |Name|Parameters|Description| |-|-|-| -|filters-change|`(Array<{ columnKey: string \| number, filterOptionValue: string \| number }>, initiatorColumn: object)`|| +|filters-change|`(filters:{(string \| number): Array }, initiatorColumn: object)`|| |sorter-change|`({ columnKey: string \| number, sorter: 'default' \| function \| boolean, order: 'ascend' \| 'descend' \| false } \| null)`|If there won't be a active sorter after change, sorter-change will emit `null`| |page-change|`(page: number)`|| |page-size-change|`(pageSize: number)`|| diff --git a/demo/documentation/components/dataTable/zhCN/controlledFilter.md b/demo/documentation/components/dataTable/zhCN/controlledFilter.md index 3446ba192..696c8f2d9 100644 --- a/demo/documentation/components/dataTable/zhCN/controlledFilter.md +++ b/demo/documentation/components/dataTable/zhCN/controlledFilter.md @@ -96,9 +96,8 @@ export default { this.addressColumn.filterOptionValues = [] }, handleFiltersChange (filters, sourceColumn) { - this.addressColumn.filterOptionValues = filters.filter( - filter => filter.columnKey === sourceColumn.key - ).map(filter => filter.filterOptionValue) + console.log(filters, sourceColumn) + this.addressColumn.filterOptionValues = filters[sourceColumn.key] } } } diff --git a/demo/documentation/components/dataTable/zhCN/index.md b/demo/documentation/components/dataTable/zhCN/index.md index 6dad4d095..d43ad8850 100644 --- a/demo/documentation/components/dataTable/zhCN/index.md +++ b/demo/documentation/components/dataTable/zhCN/index.md @@ -55,7 +55,7 @@ ajaxUsage |名称|参数|说明| |-|-|-| -|filters|`( columnKey: string \| number, filterOptionValue: string \| number } \| Array<{ columnKey: string \| number, filterOptionValue: string \| number }>)`|| +|filters|`({(string \| number): Array })`| Key 是列的 key, value 是 filterOptionValues.| |sort|`(columnKey: string \| null, order: 'ascend' \| 'descend' \| false)`|如果 columnKey 设为 `null`,那它和 clearSorter 效果一致| |page|`(page: number) => void`|| |clearFilters|`() => void`|| @@ -65,7 +65,7 @@ ajaxUsage ## Events |名称|参数|说明| |-|-|-| -|filters-change|`(Array<{ columnKey: string \| number, filterOptionValue: string \| number }>, initiatorColumn: object)`|| +|filters-change|`(filters:{(string \| number): Array }, initiatorColumn: object)`|| |sorter-change|`({ columnKey: string \| number, sorter: 'default' \| function \| boolean, order: 'ascend' \| 'descend' \| false } \| null)`|如果在变动后没有激活的排序,那么 sorter-change 将发出 `null`| |page-change|`(page: number)`|| |page-size-change|`(pageSize: number)`|| diff --git a/src/DataTable/src/DataTable.vue b/src/DataTable/src/DataTable.vue index 98fefdbc0..3006a7f17 100644 --- a/src/DataTable/src/DataTable.vue +++ b/src/DataTable/src/DataTable.vue @@ -213,7 +213,7 @@ export default { /** internal checked rows */ internalCheckedRowKeys: [], /** internal filters state */ - internalActiveFilters: [], + internalActiveFilters: {}, /** internal sorter state */ internalActiveSorter: null, /** internal pagination state */ @@ -271,9 +271,7 @@ export default { } return this.data ? this.data.filter(row => { for (const columnKey of Object.keys(row)) { - const activeFilterOptionValues = syntheticActiveFilters - .filter(filterInfo => filterInfo.columnKey === columnKey) - .map(filterInfo => filterInfo.filterOptionValue) + const activeFilterOptionValues = syntheticActiveFilters[columnKey] || [] if (!activeFilterOptionValues.length) continue const columnToFilter = normalizedColumns.find(column => column.key === columnKey) /** @@ -289,7 +287,7 @@ export default { } } else { if (activeFilterOptionValues.some(filterOptionValue => filter(filterOptionValue, row))) { - return true + continue } else { return false } @@ -307,20 +305,12 @@ export default { const columnsWithControlledFilter = this.normalizedColumns.filter(column => { return Array.isArray(column.filterOptionValues) }) - const keyOfColumnsToFilter = columnsWithControlledFilter.map(column => column.key) - const controlledActiveFilters = [] + const controlledActiveFilters = {} columnsWithControlledFilter.forEach(column => { - column.filterOptionValues.forEach(filterOptionValue => { - controlledActiveFilters.push({ - columnKey: column.key, - filterOptionValue - }) - }) + controlledActiveFilters[column.key] = column.filterOptionValues }) - const uncontrolledFilters = this.internalActiveFilters.filter(({ - columnKey - }) => !keyOfColumnsToFilter.includes(columnKey)) - const activeFilters = controlledActiveFilters.concat(uncontrolledFilters) + const internalActiveFilters = createShallowClonedObject(this.internalActiveFilters) + const activeFilters = Object.assign(internalActiveFilters, controlledActiveFilters) return activeFilters }, syntheticActiveSorter () { @@ -380,7 +370,7 @@ export default { this.$emit('change', { sorter: createShallowClonedObject(this.syntheticActiveSorter), pagination: createShallowClonedObject(this.syntheticPagination), - filters: createShallowClonedArray(this.syntheticActiveFilters) + filters: createShallowClonedObject(this.syntheticActiveFilters) }) this.$emit('page-size-change') } @@ -481,12 +471,7 @@ export default { } } if (column.filter && Array.isArray(column.defaultFilterOptionValues)) { - column.defaultFilterOptionValues.forEach(filterOptionValue => { - this.internalActiveFilters.push({ - columnKey: column.key, - filterOptionValue - }) - }) + this.internalActiveFilters[column.key] = column.defaultFilterOptionValues } }) this.internalCheckedRowKeys = this.defaultCheckedRowKeys @@ -501,18 +486,8 @@ export default { this.$emit('sorter-change', createShallowClonedObject(sorter)) }, changeFilters (filters, sourceColumn) { - if (!filters) { - this.internalActiveFilters = [] - this.$emit('filters-change', [], createShallowClonedObject(sourceColumn)) - } else { - if (Array.isArray(filters)) { - this.internalActiveFilters = filters - this.$emit('filters-change', createShallowClonedArray(filters), createShallowClonedObject(sourceColumn)) - } else { - this.internalActiveFilters = [ filters ] - this.$emit('filters-change', [ filters ], sourceColumn) - } - } + this.internalActiveFilters = !filters ? {} : filters + this.$emit('filters-change', createShallowClonedObject(this.internalActiveFilters), createShallowClonedObject(sourceColumn)) }, scrollMainTableBodyToTop () { const { @@ -599,7 +574,7 @@ export default { this.clearFilters() }, clearFilters () { - this.filters([]) + this.filters({}) }, filters (filters) { this.filter(filters) diff --git a/src/DataTable/src/HeaderButton/FilterButton.vue b/src/DataTable/src/HeaderButton/FilterButton.vue index f703e3015..e197b15c2 100644 --- a/src/DataTable/src/HeaderButton/FilterButton.vue +++ b/src/DataTable/src/HeaderButton/FilterButton.vue @@ -40,22 +40,20 @@ import NDataTableFilterMenu from './FilterMenu' import NPopover from '../../../Popover' import funnel from '../../../_icons/funnel' -function createFilterOptionValues (activeFilters, column) { - const activeFilterOptionValues = activeFilters - .filter(filter => filter.columnKey === column.key) - .map(filter => filter.filterOptionValue) - return activeFilterOptionValues -} +// function createFilterOptionValues (activeFilters, column) { +// // const activeFilterOptionValues = activeFilters +// // .filter(filter => filter.columnKey === column.key) +// // .map(filter => filter.filterOptionValue) +// const activeFilterOptionValues = activeFilters[column.key] +// return activeFilterOptionValues +// } -function createActiveFilters (allFilters, columnKey, filters) { - allFilters = allFilters.filter(filter => filter.columnKey !== columnKey) - if (!Array.isArray(filters)) { - filters = [filters] +function createActiveFilters (allFilters, columnKey, filterOptionValues) { + if (!Array.isArray(filterOptionValues)) { + filterOptionValues = [filterOptionValues] } - return allFilters.concat(filters.map(filter => ({ - columnKey, - filterOptionValue: filter - }))) + allFilters[columnKey] = filterOptionValues + return allFilters } export default { @@ -91,7 +89,7 @@ export default { return this.NDataTable.syntheticActiveFilters }, activeFilterOptionValues () { - return createFilterOptionValues(this.activeFilters, this.column) + return this.activeFilters[this.column.key] }, active () { if (Array.isArray(this.activeFilterOptionValues)) {