feat(Table): Table支持筛选功能

packages/devui-vue/devui/table/__tests__/table.spec.tsx

@@ -272,4 +272,60 @@ describe('d-table', () => {
     expect(lastTd.text()).toBe('1990/01/12');
     expect(handleSortChange).toBeCalled();
   });
+
+  it('filter', async () => {
+    const handleSingleChange = jest.fn();
+    const wrapper = mount({
+      setup() {
+        const singleFilterList = [
+          {
+            name: 'Clear',
+            value: 'Clear',
+          },
+          {
+            name: 'Female',
+            value: 'Female',
+          },
+          {
+            name: 'Male',
+            value: 'Male',
+          },
+        ];
+        return () => (
+          <DTable data={data}>
+            <DColumn field="firstName" header="First Name"></DColumn>
+            <DColumn field="lastName" header="Last Name"></DColumn>
+            <DColumn
+              field="gender"
+              header="Gender"
+              filterable
+              filter-multiple={false}
+              filter-list={singleFilterList}
+              onFilterChange={handleSingleChange}></DColumn>
+            <DColumn field="date" header="Date of birth"></DColumn>
+          </DTable>
+        );
+      },
+    });
+
+    await nextTick();
+    await nextTick();
+
+    const table = wrapper.find('.devui-table');
+    const tableHeader = table.find('.devui-table__thead');
+    const filterTh = tableHeader.find('tr').findAll('th')[2];
+    expect(filterTh.find('.devui-dropdown-toggle').exists()).toBeTruthy();
+
+    const filterIcon = filterTh.find('.filter-icon');
+    await filterIcon.trigger('click');
+    const dropdownMenu = document.querySelector('.devui-flexible-overlay');
+    expect(dropdownMenu).toBeTruthy();
+
+    const listItems = dropdownMenu?.querySelectorAll('.filter-item');
+    expect(listItems?.length).toBe(3);
+
+    await listItems[0].dispatchEvent(new Event('click'));
+    expect(handleSingleChange).toBeCalled();
+    expect(document.querySelector('.devui-flexible-overlay')?.getAttribute('style')).toContain('display: none');
+  });
 });

packages/devui-vue/devui/table/src/components/column/column-types.ts

@@ -1,4 +1,4 @@
-import type { PropType, ExtractPropTypes, VNode, Slot, ComponentInternalInstance } from 'vue';
+import type { PropType, ExtractPropTypes, VNode, Slot, ComponentInternalInstance, SetupContext } from 'vue';
 import { DefaultRow } from '../../table-types';
 import { TableStore } from '../../store/store-types';
 
@@ -12,7 +12,6 @@ export type ColumnType = 'checkable' | 'index' | '';
 export type SortDirection = 'ASC' | 'DESC' | '';
 
 export interface FilterConfig {
-  id: number | string;
   name: string;
   value: any;
   checked?: boolean;
@@ -62,7 +61,7 @@ export const tableColumnProps = {
   },
   filterMultiple: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   filterList: {
     type: Array as PropType<FilterConfig[]>,
@@ -78,15 +77,6 @@ export const tableColumnProps = {
 
 export type TableColumnProps = ExtractPropTypes<typeof tableColumnProps>;
 
-export type FilterResults = (string | number)[];
-
-export interface CustomFilterProps {
-  value: FilterResults;
-  onChange: (value: FilterResults) => void;
-}
-
-export type CustomFilterSlot = (props: CustomFilterProps) => VNode[];
-
 export interface Column {
   id?: string;
   type?: ColumnType;
@@ -103,11 +93,11 @@ export interface Column {
   filterList?: FilterConfig[];
   fixedLeft?: string;
   fixedRight?: string;
+  ctx: SetupContext;
   renderHeader?: (column: Column, store: TableStore) => VNode;
   renderCell?: (rowData: DefaultRow, columnItem: Column, store: TableStore, rowIndex: number) => VNode;
   formatter?: Formatter;
   sortMethod: SortMethod;
-  customFilterTemplate?: CustomFilterSlot;
   subColumns?: Slot;
 }
 

packages/devui-vue/devui/table/src/components/column/column.tsx

@@ -1,4 +1,16 @@
-import { inject, defineComponent, onBeforeUnmount, onMounted, toRefs, watch, ref, getCurrentInstance, onBeforeMount, h } from 'vue';
+import {
+  inject,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  toRefs,
+  watch,
+  ref,
+  getCurrentInstance,
+  onBeforeMount,
+  h,
+  SetupContext,
+} from 'vue';
 import { tableColumnProps, TableColumnProps, TableColumn } from './column-types';
 import { TABLE_TOKEN, Table, DefaultRow } from '../../table-types';
 import { createColumn, useRender } from './use-column';
@@ -8,7 +20,8 @@ let columnIdInit = 1;
 export default defineComponent({
   name: 'DColumn',
   props: tableColumnProps,
-  setup(props: TableColumnProps, ctx) {
+  emits: ['filter-change'],
+  setup(props: TableColumnProps, ctx: SetupContext) {
     const instance = getCurrentInstance() as TableColumn;
     const column = createColumn(toRefs(props), ctx.slots);
     const owner = inject(TABLE_TOKEN) as Table<DefaultRow>;
@@ -17,6 +30,7 @@ export default defineComponent({
     const { columnOrTableParent, getColumnIndex } = useRender();
     const parent: any = columnOrTableParent.value;
     columnId = `${parent.tableId || parent.columnId}_column_${columnIdInit++}`;
+    column.ctx = ctx;
 
     onBeforeMount(() => {
       isSubColumn.value = owner !== parent;

packages/devui-vue/devui/table/src/components/filter/filter-types.ts

@@ -0,0 +1,36 @@
+import type { ExtractPropTypes, PropType, Ref } from 'vue';
+import { FilterConfig } from '../column/column-types';
+
+export const filterProps = {
+  filterList: {
+    type: Array as PropType<FilterConfig[]>,
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+};
+
+export interface UseFilterRender {
+  showMenu: Ref<boolean>;
+  filterMenuRef: Ref<HTMLElement | null>;
+  filterIconRef: Ref<HTMLElement | null>;
+  handleIconClick: () => void;
+  handleConfirm: (val: FilterConfig[]) => void;
+  handleSelect: (val: FilterConfig) => void;
+}
+
+export interface UseFilterMultiple {
+  _checkList: Ref<FilterConfig[]>;
+  _checkAll: Ref<boolean>;
+  _halfChecked: Ref<boolean>;
+  handleConfirm: () => void;
+}
+
+export interface UseFilterSingle {
+  selectedItem: Ref<FilterConfig | null>;
+  handleSelect: (val: FilterConfig) => void;
+}
+
+export type FilterProps = ExtractPropTypes<typeof filterProps>;

packages/devui-vue/devui/table/src/components/filter/filter.scss

@@ -1,115 +1,43 @@
 @import '../../../../styles-var/devui-var.scss';
 
-.data-table-column-filter-content {
-  background: $devui-connected-overlay-bg;
+.filter-wrapper {
+  width: 200px;
+  background-color: $devui-connected-overlay-bg;
   border-radius: $devui-border-radius;
-  box-sizing: content-box;
 
-  .drop-down-item {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  .filter-all-check {
+    padding: 0 8px 4px;
+    border-bottom: 1px solid $devui-dividing-line;
   }
 
-  .line {
-    width: calc(100% - 20px);
-    margin-left: 10px;
+  .filter-multiple-menu {
+    width: 100%;
+    padding: 4px 8px;
+    border-bottom: 1px solid $devui-dividing-line;
   }
 
-  & > .filter-options > d-checkbox {
-    height: 30px;
-    padding: 0 10px;
+  .filter-operation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 8px;
+    height: 26px;
   }
 
-  .checkbox-group {
-    padding: 0 10px;
+  .filter-single-menu {
+    width: 100%;
   }
-}
-
-.filter-content-hidden {
-  display: none !important;
-}
-
-.line {
-  height: 1px;
-  background: $devui-dividing-line;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.checkbox-group {
-  height: 30px;
-}
-
-.button-style {
-  display: inline-block;
-  width: 45%;
-  font-size: $devui-font-size;
-  color: $devui-text;
-  text-align: center;
-  line-height: 20px;
-  cursor: pointer;
-}
-
-.button-style:hover {
-  color: $devui-brand;
-}
-
-.normal-filter-list-container {
-  overflow-y: auto;
-}
-
-.icon-filter-style {
-  color: $devui-dividing-line;
-  cursor: pointer;
-  margin-left: 20px;
-}
-
-.label-style {
-  font-size: $devui-font-size;
-  color: $devui-text;
-  letter-spacing: 0;
-  margin-left: 10px;
-}
 
-.email-style {
-  font-size: $devui-font-size;
-  color: $devui-placeholder;// TODO: Color-Question
-  letter-spacing: 0;
-  margin-left: 10px;
-}
-
-.overlay-mask {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 9;
-}
-
-.drop-down-item {
-  padding: 0 10px;
-  height: 30px;
-  line-height: 30px;
-  cursor: pointer;
-
-  &:hover {
-    background: $devui-list-item-hover-bg;
-    color: $devui-list-item-hover-text;
+  .filter-item {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 }
 
-.filter-item-active {
-  background: $devui-list-item-active-bg;
-  color: $devui-list-item-active-text;
-}
-
-.edit-padding-fix {
-  margin-top: -6px;
-  margin-bottom: -6px;
-}
-
 .filter-icon {
   display: inline-block;
   vertical-align: middle;
@@ -128,6 +56,11 @@
   }
 }
 
+.filter-item-active {
+  background: $devui-list-item-active-bg;
+  color: $devui-list-item-active-text;
+}
+
 .filter-icon-active {
   visibility: visible !important;