modify(dataTable): filters

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]
     }
   }
 }

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<string \| number> })`|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<string \| number> }, 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)`||

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]
     }
   }
 }

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<string \| number> })`| 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<string \| number> }, 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)`||

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)

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)) {