diff --git a/packages/app/src/components/form.fields/filter/index.tsx b/packages/app/src/components/form.fields/filter/index.tsx
index 3eb387b7a4..eeb5d52013 100644
--- a/packages/app/src/components/form.fields/filter/index.tsx
+++ b/packages/app/src/components/form.fields/filter/index.tsx
@@ -7,6 +7,8 @@ import { mapStyledProps } from '../shared'
 import get from 'lodash/get';
 import moment from 'moment';
 import './style.less';
+import api from '@/api-client';
+import { useRequest } from 'umi';
 
 export function FilterGroup(props: any) {
   const { showDeleteButton = true, fields = [], onDelete, onChange, onAdd, dataSource = {} } = props;
@@ -445,12 +447,23 @@ export const Filter = connect({
       }
     ],
   };
-  const { value, onChange, ...restProps } = props;
-  console.log('valuevaluevaluevaluevaluevalue', value);
+  const { value, onChange, associatedKey, filter = {}, fields = [], ...restProps } = props;
+
+  const { data = [], loading = true } = useRequest(() => {
+    return associatedKey ? api.resource(`collections.fields`).list({
+      associatedKey,
+      filter,
+    }) : Promise.resolve({
+      data: fields,
+    });
+  }, {
+    refreshDeps: [associatedKey]
+  });
+
   return <FilterGroup showDeleteButton={false} dataSource={value ? toValues(value) : dataSource} onChange={(values) => {
     console.log(values);
     onChange(toFilter(values));
-  }} {...restProps}/>
+  }} {...restProps} fields={data.filter(item => item.filterable)}/>
 });
 
 export default Filter;