diff --git a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
index 2d5c0c3f7c67569e171a515dde11e14174cef055..02c67e3eed6897a2d3a58355c3e29a581a214a2c 100644
--- a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
+++ b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
@@ -4,7 +4,9 @@ import { ButtonEdit } from '../../button-edit';
 import { ViewType } from './types';
 import { groupIcon } from './const';
 import { useState } from './composition/use-state';
-import { useEventHandlers } from './composition/use-event-handlers';
+import { useComboList } from './composition/use-combo-list';
+import FOptions from './components/options';
+
 export default defineComponent({
   name: 'FComboList',
   props: comboListProps,
@@ -15,9 +17,8 @@ export default defineComponent({
   setup(props: ComboListProps, context: SetupContext) {
     const modelValue = ref(props.modelValue);
     // is panel visible
-    const [isPanelVisible] = useState<boolean>(false);
+    const { isPanelVisible, onClear, onButtonClick } = useComboList(props, context, modelValue);
     const [displayText, setDisplayText] = useState(props.displayText);
-    const { onClear } = useEventHandlers(props, context, modelValue);
     return () => {
       return (
         <>
@@ -35,6 +36,7 @@ export default defineComponent({
             style="display:block"
             modelValue={displayText.value}
             onClear={onClear}
+            onClickButton={onButtonClick}
           />
           {/** tag area */}
           {props.viewType === ViewType.Tag && (
@@ -63,7 +65,10 @@ export default defineComponent({
           )}
           {/** panel area */}
           {isPanelVisible.value && (
-            <div class="comboPanel f-area-hide" style="z-index: 99999"></div>
+            <div class="comboPanel f-area-hide" style="z-index: 99999">
+              show
+              <FOptions options={props.data}></FOptions>
+            </div>
           )}
         </>
       );
diff --git a/packages/ui-vue/components/combo-list/src/combo-list.props.ts b/packages/ui-vue/components/combo-list/src/combo-list.props.ts
index cbda826528b7eea9720140f5dc7537b21f35a75f..068830f2defa62955d2a998c1c8cc44a8ddf1d52 100644
--- a/packages/ui-vue/components/combo-list/src/combo-list.props.ts
+++ b/packages/ui-vue/components/combo-list/src/combo-list.props.ts
@@ -1,5 +1,5 @@
 import { ExtractPropTypes, PropType } from "vue";
-import { ViewType, EnumType, Type } from './types';
+import { Options, ViewType } from './types';
 
 /**
  * 下拉列表属性
@@ -8,131 +8,140 @@ export const comboListProps = {
   /**
    * 组件标识
    */
-  id: Type(String),
+  id: { type: String },
   /**
    * 可选，是否可编辑
    * 默认`false`
    */
-  editable: Type({ default: false, type: Boolean }),
+  editable: { default: false, type: Boolean },
   /**
    * 可选，是否禁用
    * 默认为`false`
    */
-  disabled: Type({ default: false, type: Boolean }),
+  disabled: { default: false, type: Boolean },
   /**
    * 可选，是否只读
    * 默认为`false`
    */
-  readonly: Type({ default: false, type: Boolean }),
+  readonly: { default: false, type: Boolean },
   /**
    * 最大输入长度
    */
-  maxLength: Type(Number),
+  maxLength: { type: Number },
   /**
    * 占位符
    */
-  placeholder: Type(String),
+  placeholder: { type: String },
   /**
    * 可选，强制显示占位符
    * 默认`false`
    */
-  forcePlaceholder: Type({ default: false, type: Boolean }),
+  forcePlaceholder: { default: false, type: Boolean },
   /**
    * 可选，是否启用清空
    * 默认启用
    */
-  enableClear: Type({ default: true, type: Boolean }),
+  enableClear: { default: true, type: Boolean },
   /**
    * 可选，鼠标悬停时是否显示控件值
    * 默认显示
    */
-  enableTitle: Type({ default: true, type: Boolean }),
+  enableTitle: { default: true, type: Boolean },
   /**
    * 可选，下拉列表值展示方式
    * 支持text | tag，即文本或标签，默认为`ViewType.Text`，即文本方式`text`
    */
-  viewType: Type({ default: ViewType.Text, type: String as PropType<ViewType> }),
+  viewType: { default: ViewType.Text, type: String as PropType<ViewType> },
   /**
    * 可选，字段映射
    */
-  mapFields: Type(Object),
+  mapFields: { type: Object },
   /**
    * 下拉数据源
    */
-  data: Type(Array),
+  data: { type: Array as PropType<Options> },
   /**
    * 可选，数据源id字段
    * 默认为`id`
    */
-  idField: Type({ default: 'id', type: String }),
+  idField: { default: 'id', type: String },
   /**
    * 可选，数据源值字段
    * 默认为`id`
    */
-  valueField: Type({ default: 'id', type: String }),
+  valueField: { default: 'id', type: String },
   /**
    * 可选，数据源显示字段
    * 默认为`label`
    */
-  textField: Type({ default: 'label', type: String }),
+  textField: { default: 'label', type: String },
   /**
    * 可选，是否支持多选
    * 默认`false`
    */
-  multiSelect: Type({ default: false, type: Boolean }),
+  multiSelect: { default: false, type: Boolean },
   /**
    * 数据源地址
    */
-  uri: Type(String),
+  uri: { type: String },
   /**
    * 可选，最大高度
    * 默认`200`
    */
-  maxHeight: Type({ default: 350, type: Number }),
+  maxHeight: { default: 350, type: Number },
   /**
    * 可选，是否支持远端过滤
    * 默认`false`
    */
-  remoteSearch: Type({ default: false, type: Boolean }),
+  remoteSearch: { default: false, type: Boolean },
   /**
    * 可选，清空值时隐藏面板
    * 默认`true`
    */
-  hidePanelOnClear: Type({ default: true, type: Boolean }),
+  hidePanelOnClear: { default: true, type: Boolean },
   /**
    * 可选，分隔符
    * 默认`,`
    */
-  separator: Type({ default: ',', type: String }),
+  separator: { default: ',', type: String },
   /**
    * 可选，展示文本
    * 默认为空字符串
    */
-  displayText: Type({ type: String, default: '' }),
+  displayText: { type: String, default: '' },
   /**
    * 绑定值
    */
-  modelValue: Type(String)
+  modelValue: { type: String }
 
 };
 export type ComboListProps = ExtractPropTypes<typeof comboListProps>;
 
 /**
- * option属性
+ * option 属性
  */
 export const optionProps = {
   /**
    * 必须，值
    */
-  value: Type({ required: true, type: [String, Number] as PropType<string | number> }),
+  value: { required: true, type: [String, Number] as PropType<string | number> },
   /**
    * 必须，名称
    */
-  name: Type({ required: true, type: String }),
+  name: { required: true, type: String },
   /**
    * 可选，是否禁用
    * 默认`false`
    */
-  disabled: Type({ default: false, type: Boolean })
+  disabled: { default: false, type: Boolean }
 };
 export type OptionProps = ExtractPropTypes<typeof optionProps>;
+/**
+ * options 属性
+ */
+export const optionsProps = {
+  options: {
+    type: Array as PropType<Options>
+  }
+};
+export type OptionsProps = ExtractPropTypes<typeof optionsProps>;
\ No newline at end of file
diff --git a/packages/ui-vue/components/combo-list/src/components/option.tsx b/packages/ui-vue/components/combo-list/src/components/option.tsx
index 4080a8564e828b5696c0088444e40e100b017909..a7e2577d40aafc8a1a0dc99027c87db12f645c42 100644
--- a/packages/ui-vue/components/combo-list/src/components/option.tsx
+++ b/packages/ui-vue/components/combo-list/src/components/option.tsx
@@ -1,13 +1,13 @@
 import { defineComponent, SetupContext } from 'vue';
-import { comboListProps, ComboListProps } from '../combo-list.props';
+import { optionProps, OptionProps } from '../combo-list.props';
 import { useOption } from '../composition/use-option';
 
 export default defineComponent({
     name: 'FOption',
-    props: comboListProps,
+    props: optionProps,
     emits: [],
     inheritAttrs: false,
-    setup(props: ComboListProps, context: SetupContext) {
+    setup(props: OptionProps, context: SetupContext) {
         const { name } = useOption(props, context);
         return () => {
             return (
diff --git a/packages/ui-vue/components/combo-list/src/components/options.tsx b/packages/ui-vue/components/combo-list/src/components/options.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..15883d91a9cbd68f7c59165d98cf7f24ef88655f
--- /dev/null
+++ b/packages/ui-vue/components/combo-list/src/components/options.tsx
@@ -0,0 +1,22 @@
+import { defineComponent, SetupContext } from 'vue';
+import { optionsProps, OptionsProps } from '../combo-list.props';
+import { IOption } from '../types';
+import FOption from '../components/option';
+
+export default defineComponent({
+    name: 'FOptions',
+    props: optionsProps,
+    emits: [],
+    inheritAttrs: false,
+    setup(props: OptionsProps, context: SetupContext) {
+        return () => {
+            return (
+                <ul class="list-group list-group-flush">
+                    {props?.options?.map((option: IOption) => (
+                        <FOption value={option.value} name={option.name} disabled={option.disabled}></FOption>
+                    ))}
+                </ul>
+            );
+        };
+    }
+});
\ No newline at end of file
diff --git a/packages/ui-vue/components/combo-list/src/composition/index.ts b/packages/ui-vue/components/combo-list/src/composition/index.ts
index c1df61f5cbe210bcc53bc3a9edf4342ecf7baf71..188ff2e19befe298f0b3e77a4effde8dbbc34117 100644
--- a/packages/ui-vue/components/combo-list/src/composition/index.ts
+++ b/packages/ui-vue/components/combo-list/src/composition/index.ts
@@ -1,3 +1,3 @@
-export * from './types';
 export * from './use-state';
-export * from './use-event-handlers';
\ No newline at end of file
+export * from './use-event-handlers';
+export * from './use-option';
\ No newline at end of file
diff --git a/packages/ui-vue/components/combo-list/src/composition/types.ts b/packages/ui-vue/components/combo-list/src/composition/types.ts
deleted file mode 100644
index 91801b22200dff508e63165d3add60a5b6f8c165..0000000000000000000000000000000000000000
--- a/packages/ui-vue/components/combo-list/src/composition/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ComputedRef, Ref, UnwrapRef } from "vue";
-
-/**
- * IUseState type
- * @description 受vue类型系统限制，仅在类型定义中约定state只读，实际返回对象可写
- */
-export type IUseState<T> = [Readonly<Ref<UnwrapRef<T>>>, (state: UnwrapRef<T>) => void];
-
-export interface IUseEventHandler {
-  /**
-   * 清除事件
-   */
-  onClear: ($event: Event) => void;
-}
-export interface IUseOption {
-  name: ComputedRef<string | number | undefined>;
-}
\ No newline at end of file
diff --git a/packages/ui-vue/components/combo-list/src/composition/use-combo-list.ts b/packages/ui-vue/components/combo-list/src/composition/use-combo-list.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e90fb97a9c7d4acd5ed8468e8588b93229dd210a
--- /dev/null
+++ b/packages/ui-vue/components/combo-list/src/composition/use-combo-list.ts
@@ -0,0 +1,21 @@
+import { ref, Ref, SetupContext } from "vue";
+import { ComboListProps } from "../combo-list.props";
+import { ModelValue } from "../types";
+
+export function useComboList(props: ComboListProps, context: SetupContext, modelValue: Ref<ModelValue>) {
+    const isPanelVisible = ref(false);
+    //#region events
+    function onClear($event: Event) {
+        modelValue.value = '';
+        context.emit('clear');
+    }
+    function onButtonClick($event: Event) {
+        isPanelVisible.value = !isPanelVisible.value;
+    }
+    //#endregion
+    return {
+        isPanelVisible,
+        onClear,
+        onButtonClick
+    };
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts b/packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts
deleted file mode 100644
index 6a1763c45ffeb5a0d24548845a234a35fa9481ff..0000000000000000000000000000000000000000
--- a/packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Ref, SetupContext } from "vue";
-import { ComboListProps } from "../combo-list.props";
-import { IUseEventHandler } from "./types";
-
-export function useEventHandlers(props: ComboListProps, context: SetupContext, modelValue: Ref<string | undefined>): IUseEventHandler {
-  function onClear($event: Event) {
-    modelValue.value = '';
-    context.emit('clear');
-  }
-  return {
-    onClear
-  };
-}
\ No newline at end of file
diff --git a/packages/ui-vue/components/combo-list/src/composition/use-option.ts b/packages/ui-vue/components/combo-list/src/composition/use-option.ts
index 71cbd95ecb0db409d74b39ce092ded94bcbc54a3..3d706e8dfeee609cfbf0a0c168a7342da7286f02 100644
--- a/packages/ui-vue/components/combo-list/src/composition/use-option.ts
+++ b/packages/ui-vue/components/combo-list/src/composition/use-option.ts
@@ -1,6 +1,6 @@
 import { computed, Ref, SetupContext } from "vue";
+import { IUseOption } from "../types";
 import { OptionProps } from "../combo-list.props";
-import { IUseOption } from "./types";
 
 export function useOption(props: OptionProps, context: SetupContext): IUseOption {
     const name = computed(() => {
diff --git a/packages/ui-vue/components/combo-list/src/composition/use-state.ts b/packages/ui-vue/components/combo-list/src/composition/use-state.ts
index 2fd50113a0cf6bf21bcc4c4419b198af23234fe3..f25ca7abbb0f93e581d42a89d77c214eb55613ac 100644
--- a/packages/ui-vue/components/combo-list/src/composition/use-state.ts
+++ b/packages/ui-vue/components/combo-list/src/composition/use-state.ts
@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { IUseState } from './types';
+import { IUseState } from '../types';
 
 /**
  * state hook
diff --git a/packages/ui-vue/components/combo-list/src/types.ts b/packages/ui-vue/components/combo-list/src/types.ts
index 31029f76bfce06054fb8072e0de07ea9228d84fd..7a6a7a37f119ef64f26f05d0d1f8963a1b3a1c55 100644
--- a/packages/ui-vue/components/combo-list/src/types.ts
+++ b/packages/ui-vue/components/combo-list/src/types.ts
@@ -1,30 +1,33 @@
-import { Prop } from 'vue';
+import { ComputedRef, Ref, UnwrapRef } from 'vue';
+export type ModelValue = number | string | undefined | Array<number | string | undefined>;
 /**
- * 下拉列表展现方式
+ * 数据展现方式
  */
 export enum ViewType {
   Text = 'text',
   Tag = 'tag'
 };
 /**
- * 属性类型
- * @param options options
- * @returns 
+ * IUseState type
+ * @description 受vue类型系统限制，仅在类型定义中约定state只读，实际返回对象可写
  */
-export function Type<T, D>(options: Prop<T, D>) {
-  return options;
+export type IUseState<T> = [Readonly<Ref<UnwrapRef<T>>>, (state: UnwrapRef<T>) => void];
+
+export interface IUseEventHandler {
+  /**
+   * 清除事件
+   */
+  onClear: ($event: Event) => void;
+  onButtonClick: ($event: Event) => void;
 }
-/**
- * 枚举类型
- * @param defaultValue 默认值
- * @param enumType 枚举类型
- * @deprecated use proptype
- * @returns 
- */
-export function EnumType<T extends string | number>(defaultValue: T, enumType: Record<symbol, T>) {
-  return {
-    default: defaultValue,
-    validator: (value: T) => Object.values(enumType).includes(value),
-    type: [String, Number]
-  }
-}
\ No newline at end of file
+export interface IUseOption {
+  name: ComputedRef<string | number | undefined>;
+}
+
+export interface IOption {
+  value: string | number;
+  name: string;
+  disabled: boolean;
+}
+
+export type Options = Array<IOption>;
\ No newline at end of file
diff --git a/packages/ui-vue/src/components/combo-list.vue b/packages/ui-vue/src/components/combo-list.vue
index 6838066baf912a2eb330b3ede4f1fba96107a042..49f5e945a58286f25f8fca0a0d5bf5a70addd6c3 100644
--- a/packages/ui-vue/src/components/combo-list.vue
+++ b/packages/ui-vue/src/components/combo-list.vue
@@ -7,6 +7,7 @@ const displayText = ref('');
 const forcePlaceholder = ref(true);
 const editable = ref(true);
 const enableClear = ref(true);
+const data = ref([{ value: '1', name: '1', disabled: false }]);
 
 function onClear(params: any) {
     console.log('clear');
@@ -49,7 +50,7 @@ function onClear(params: any) {
             <td colspan="2">
                 <ComboList :disable="disable" :readonly="readonly" :displayText="displayText"
                     :forcePlaceholder="forcePlaceholder" placeholder="请选择" :editable="editable"
-                    :enableClear="enableClear" :maxLength="18" @clear="onClear" />
+                    :enableClear="enableClear" :maxLength="18" @clear="onClear" :data="data" />
             </td>
         </tr>
     </table>