From 5e3ab30127bc9202db83c44a3cdaa9615090d0a5 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Fri, 11 Mar 2022 12:21:19 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20select=E6=8F=90=E4=BE=9B=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=E5=AE=9A=E5=88=B6=E5=92=8C=E5=9B=9E=E6=98=BE=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E5=AE=9A=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/select-tree/selectTree.vue         | 19 +++++---
 components/select/optionList.tsx              |  4 ++
 components/select/props.ts                    |  4 ++
 components/select/select.vue                  | 12 +++--
 components/tree/interface.ts                  |  1 +
 .../select/{label.vue => customOption.vue}    | 30 +++++++-----
 docs/.vitepress/components/select/index.md    | 45 ++++++++++--------
 .../components/select/labelField.vue          | 47 +++++++++++++++++++
 .../.vitepress/components/selectTree/index.md |  4 ++
 .../components/selectTree/labelField.vue      | 42 +++++++++++++++++
 10 files changed, 169 insertions(+), 39 deletions(-)
 rename docs/.vitepress/components/select/{label.vue => customOption.vue} (63%)
 create mode 100644 docs/.vitepress/components/select/labelField.vue
 create mode 100644 docs/.vitepress/components/selectTree/labelField.vue

diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue
index c7045701..cfb89319 100644
--- a/components/select-tree/selectTree.vue
+++ b/components/select-tree/selectTree.vue
@@ -292,12 +292,19 @@ export default defineComponent({
         };
 
         const selectedOptions = computed(() =>
-            Object.values(nodeList.value).filter((option) => {
-                if (props.multiple) {
-                    return currentValue.value.includes(option.value);
-                }
-                return [currentValue.value].includes(option.value);
-            }),
+            Object.values(nodeList.value)
+                .filter((option) => {
+                    if (props.multiple) {
+                        return currentValue.value.includes(option.value);
+                    }
+                    return [currentValue.value].includes(option.value);
+                })
+                .map((option) => {
+                    return {
+                        ...option,
+                        label: `${option[props.optionLabelField]}`,
+                    };
+                }),
         );
 
         const focus = (e: Event) => {
diff --git a/components/select/optionList.tsx b/components/select/optionList.tsx
index d8faf96b..327ae2dd 100644
--- a/components/select/optionList.tsx
+++ b/components/select/optionList.tsx
@@ -30,6 +30,7 @@ const optionListProps = {
         type: Boolean,
     },
     emptyText: String,
+    renderOption: Function
 } as const;
 
 export default defineComponent({
@@ -46,6 +47,9 @@ export default defineComponent({
             if ((option as any).slots?.default) {
                 return (option as any).slots.default({ isSelected });
             }
+            if (props.renderOption) {
+                return props.renderOption({...option, isSelected});
+            }
             if (option.label) {
                 return (
                     <>
diff --git a/components/select/props.ts b/components/select/props.ts
index 5b65e159..04bbb233 100644
--- a/components/select/props.ts
+++ b/components/select/props.ts
@@ -70,6 +70,10 @@ export const selectProps = {
         type: String,
         default: 'label',
     },
+    optionLabelField: {
+        type: String,
+        default: 'label',
+    },
 } as const;
 
 export const selectPropsDefaultValue = extractPropsDefaultValue(selectProps);
diff --git a/components/select/select.vue b/components/select/select.vue
index db17c05a..84ac24a3 100644
--- a/components/select/select.vue
+++ b/components/select/select.vue
@@ -40,6 +40,7 @@
                     :onSelect="onSelect"
                     :isLimit="isLimitRef"
                     :emptyText="listEmptyText"
+                    :renderOption="$slots.option"
                     @scroll="onScroll"
                     @mousedown.prevent
                 />
@@ -219,9 +220,14 @@ export default defineComponent({
                 const getOption = (val: SelectValue) => {
                     let cacheOption;
                     if (newOptions && newOptions.length) {
-                        cacheOption = newOptions.find(
-                            (option) => option.value === val,
-                        );
+                        cacheOption = newOptions
+                            .map((option) => {
+                                return {
+                                    ...option,
+                                    label: option[props.optionLabelField],
+                                };
+                            })
+                            .find((option) => option.value === val);
                         if (cacheOption) {
                             return cacheOption;
                         }
diff --git a/components/tree/interface.ts b/components/tree/interface.ts
index 62c3b815..7fcafca5 100644
--- a/components/tree/interface.ts
+++ b/components/tree/interface.ts
@@ -12,6 +12,7 @@ export interface TreeOption {
     isLeaf?: boolean;
     prefix?: string | (() => VNodeChild);
     suffix?: string | (() => VNodeChild);
+    [key: string]: any;
 }
 
 export interface InnerTreeOption extends TreeOption {
diff --git a/docs/.vitepress/components/select/label.vue b/docs/.vitepress/components/select/customOption.vue
similarity index 63%
rename from docs/.vitepress/components/select/label.vue
rename to docs/.vitepress/components/select/customOption.vue
index c4a46f69..5cd667c3 100644
--- a/docs/.vitepress/components/select/label.vue
+++ b/docs/.vitepress/components/select/customOption.vue
@@ -1,15 +1,23 @@
 <template>
-    <FSelect>
-        <FOption
-            v-for="(item, index) in optionList"
-            :key="index"
-            :value="item.value"
-            :label="item.label"
-        >
-            <FEllipsis>{{ item.label }}</FEllipsis>
-            <span>{{ item.value }}</span>
-        </FOption>
-    </FSelect>
+    <FSpace>
+        <FSelect>
+            <FOption
+                v-for="(item, index) in optionList"
+                :key="index"
+                :value="item.value"
+                :label="item.label"
+            >
+                <FEllipsis>{{ item.label }}</FEllipsis>
+                <span>{{ item.value }}</span>
+            </FOption>
+        </FSelect>
+
+        <FSelect :options="optionList">
+            <template #option="{ label, value }">
+                {{ value }} - {{ label.slice(0, 2) }}
+            </template>
+        </FSelect>
+    </FSpace>
 </template>
 <script>
 import { reactive } from 'vue';
diff --git a/docs/.vitepress/components/select/index.md b/docs/.vitepress/components/select/index.md
index a51ac273..dd2016b9 100644
--- a/docs/.vitepress/components/select/index.md
+++ b/docs/.vitepress/components/select/index.md
@@ -18,6 +18,24 @@ app.use(FSelect);
 
 --COMMON
 
+### 配置方式
+
+通过配置`options`直接生成选项，当数据量大于 `50` 时使用 `VirtualList`组件实现虚拟列表，性能更优。
+
+--OPTIONS
+
+### 自定义模板
+
+可以自定义备选项模板，`FOption`子组件是针对每一项单独配置，而 `slots.option` 插槽则是通用配置。
+
+--CUSTOMOPTION
+
+### 可清空
+
+包含清空按钮，可将选择器清空为初始状态
+
+--CLEARABLE
+
 ### 禁用选项
 
 禁止选择某一项
@@ -36,12 +54,6 @@ app.use(FSelect);
 
 --LIMIT
 
-### 自定义模板
-
-可以自定义备选项模板
-
---LABEL
-
 ### 可过滤
 
 可以利用搜索功能快速查找选项
@@ -52,31 +64,25 @@ app.use(FSelect);
 
 --REMOTE
 
-### 可清空
-
-包含清空按钮，可将选择器清空为初始状态
-
---CLEARABLE
-
 ### 禁用状态
 
 选择器不可用状态
 
 --DISABLED
 
+### 无数据
 
-### 配置方式
-
-通过配置`options`直接生成选项，当数据量大于 `50` 时使用 `VirtualList`组件实现虚拟列表，性能更优。
+--NODATA
 
---OPTIONS
 
-### 无数据
+### 控制回填内容
 
---NODATA
+--LABELFIELD
 
 --CODE
 
+
+
 ## Select Props
 
 | 属性                 | 说明                                          | 类型                               | 默认值                |
@@ -97,7 +103,7 @@ app.use(FSelect);
 | options           | 选项配置                            | array\<Option\>                            | `[]`               |
 | valueField    | 替代 `Option` 中的 `value` 字段名                                                              | string  | `value`    |
 | labelField    | 替代 `Option` 中的 `label` 字段名                                                              | string  | `label`    |
-
+| optionLabelField    | 配置选中选项显示的字段名                                                    | string  | `label`    |
 
 ## Select Events
 
@@ -118,6 +124,7 @@ app.use(FSelect);
 | ------- | --------------- |
 | default | option 组件列表 |
 | empty   | 无选项的内容    |
+| option   | 自定义 `Option` 内容    |
 
 ## Select Methods
 
diff --git a/docs/.vitepress/components/select/labelField.vue b/docs/.vitepress/components/select/labelField.vue
new file mode 100644
index 00000000..5fc1b70e
--- /dev/null
+++ b/docs/.vitepress/components/select/labelField.vue
@@ -0,0 +1,47 @@
+<template>
+    <FSelect :options="optionList" optionLabelField="x"></FSelect>
+</template>
+<script>
+import { reactive } from 'vue';
+
+export default {
+    setup() {
+        const optionList = reactive([
+            {
+                value: 'HuNan',
+                label: '湖南',
+                x: 'HuNan-湖南',
+            },
+            {
+                value: 'HuBei',
+                label: '湖北',
+                disabled: true,
+                x: 'HuBei-湖北',
+            },
+            {
+                value: 'ZheJiang',
+                label: '浙江',
+                x: 'ZheJiang-浙江',
+            },
+            {
+                value: 'GuangDong',
+                label: '广东',
+                x: 'GuangDong-广东',
+            },
+            {
+                value: 'JiangSu',
+                label: '江苏',
+                x: 'JiangSu-江苏',
+            },
+        ]);
+        return {
+            optionList,
+        };
+    },
+};
+</script>
+<style scoped>
+.fes-select {
+    width: 200px;
+}
+</style>
diff --git a/docs/.vitepress/components/selectTree/index.md b/docs/.vitepress/components/selectTree/index.md
index 6278a234..3a4a11e6 100644
--- a/docs/.vitepress/components/selectTree/index.md
+++ b/docs/.vitepress/components/selectTree/index.md
@@ -48,6 +48,9 @@ app.use(FSelectTree);
 设置`virtualList`属性，处理大数据。
 --VIRTUALLIST
 
+### 控制回填内容
+
+--LABELFIELD
 
 ### 无数据
 
@@ -80,6 +83,7 @@ app.use(FSelectTree);
 | childrenField         | 替代 `TreeOption` 中的 `children` 字段名                                | string                                    | `children` |
 | valueField            | 替代 `TreeOption` 中的 `value` 字段名                                   | string                                    | `value`    |
 | labelField            | 替代 `TreeOption` 中的 `label` 字段名                                   | string                                    | `label`    |
+| optionLabelField    | 配置选中选项显示的字段名                                                    | string  | `label`    |
 | remote                | 是否异步获取选项，和 `onLoad` 配合                                      | boolean                                   | `false`    |
 | loadData              | 异步加载数据的回调函数                                                  | (node: TreeOption) => Promise\<void\>     | `null`     |
 | inline                | 底层节点是否横向排列                                                    | boolean                                   | `false`    |
diff --git a/docs/.vitepress/components/selectTree/labelField.vue b/docs/.vitepress/components/selectTree/labelField.vue
new file mode 100644
index 00000000..c417d695
--- /dev/null
+++ b/docs/.vitepress/components/selectTree/labelField.vue
@@ -0,0 +1,42 @@
+<template>
+    <FSelectTree :data="data" optionLabelField="x"></FSelectTree>
+</template>
+<script>
+import { reactive } from 'vue';
+
+function createData(level = 1, baseKey = '', prefix = null, suffix = null) {
+    if (!level) return undefined;
+    return Array.apply(null, { length: 2 }).map((_, index) => {
+        const key = '' + baseKey + level + index;
+        return {
+            label: createLabel(level),
+            value: key,
+            children: createData(level - 1, key, prefix, suffix),
+            x: `${key}-${createLabel(level)}`,
+            prefix: prefix ? () => h(PictureOutlined) : null,
+            suffix: suffix ? () => h(PlusCircleOutlined) : null,
+        };
+    });
+}
+
+function createLabel(level) {
+    if (level === 4) return '道生一';
+    if (level === 3) return '一生二';
+    if (level === 2) return '二生三';
+    if (level === 1) return '三生万物';
+}
+
+export default {
+    setup() {
+        const data = reactive(createData(4));
+        return {
+            data,
+        };
+    },
+};
+</script>
+<style scoped>
+.fes-select-tree {
+    width: 200px;
+}
+</style>

From e6cb5e65e2c9d8733ce689d066d9e7e9f76d306d Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Mon, 14 Mar 2022 10:35:11 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/select-tree/selectTree.vue | 11 +++++++----
 components/select/props.ts            |  5 +----
 components/select/select.vue          | 17 ++++++++++++-----
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue
index cfb89319..152f032b 100644
--- a/components/select-tree/selectTree.vue
+++ b/components/select-tree/selectTree.vue
@@ -300,10 +300,13 @@ export default defineComponent({
                     return [currentValue.value].includes(option.value);
                 })
                 .map((option) => {
-                    return {
-                        ...option,
-                        label: `${option[props.optionLabelField]}`,
-                    };
+                    if (props.optionLabelField) {
+                        return {
+                            ...option,
+                            label: option[props.optionLabelField],
+                        };
+                    }
+                    return option;
                 }),
         );
 
diff --git a/components/select/props.ts b/components/select/props.ts
index 04bbb233..7abfb1c7 100644
--- a/components/select/props.ts
+++ b/components/select/props.ts
@@ -70,10 +70,7 @@ export const selectProps = {
         type: String,
         default: 'label',
     },
-    optionLabelField: {
-        type: String,
-        default: 'label',
-    },
+    optionLabelField: String,
 } as const;
 
 export const selectPropsDefaultValue = extractPropsDefaultValue(selectProps);
diff --git a/components/select/select.vue b/components/select/select.vue
index 84ac24a3..343c8937 100644
--- a/components/select/select.vue
+++ b/components/select/select.vue
@@ -63,6 +63,7 @@ import {
     onMounted,
     CSSProperties,
     defineComponent,
+    nextTick,
 } from 'vue';
 import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
@@ -198,14 +199,17 @@ export default defineComponent({
 
         const onSelect = (value: SelectValue) => {
             if (props.disabled) return;
-            filterText.value = '';
             if (props.multiple) {
+                filterText.value = '';
                 if (isSelect(value)) {
                     emit('removeTag', value);
                 } else {
                     if (isLimitRef.value) return;
                 }
             } else {
+                setTimeout(() => {
+                    filterText.value = '';
+                }, 1000);
                 isOpenedRef.value = false;
             }
             updateCurrentValue(unref(value));
@@ -222,10 +226,13 @@ export default defineComponent({
                     if (newOptions && newOptions.length) {
                         cacheOption = newOptions
                             .map((option) => {
-                                return {
-                                    ...option,
-                                    label: option[props.optionLabelField],
-                                };
+                                if (props.optionLabelField) {
+                                    return {
+                                        ...option,
+                                        label: option[props.optionLabelField],
+                                    };
+                                }
+                                return option;
                             })
                             .find((option) => option.value === val);
                         if (cacheOption) {

From 47203bbaacc10e389ce52f2c598a25b5ab55afc9 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Mon, 14 Mar 2022 10:41:03 +0800
Subject: [PATCH 3/4] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/components/select/index.md     | 2 +-
 docs/.vitepress/components/selectTree/index.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/components/select/index.md b/docs/.vitepress/components/select/index.md
index dd2016b9..b09fa663 100644
--- a/docs/.vitepress/components/select/index.md
+++ b/docs/.vitepress/components/select/index.md
@@ -103,7 +103,7 @@ app.use(FSelect);
 | options           | 选项配置                            | array\<Option\>                            | `[]`               |
 | valueField    | 替代 `Option` 中的 `value` 字段名                                                              | string  | `value`    |
 | labelField    | 替代 `Option` 中的 `label` 字段名                                                              | string  | `label`    |
-| optionLabelField    | 配置选中选项显示的字段名                                                    | string  | `label`    |
+| optionLabelField    | 配置选中选项显示的字段名，不传时跟`labelField`一致                                              | string  | -    |
 
 ## Select Events
 
diff --git a/docs/.vitepress/components/selectTree/index.md b/docs/.vitepress/components/selectTree/index.md
index 3a4a11e6..485c4fc9 100644
--- a/docs/.vitepress/components/selectTree/index.md
+++ b/docs/.vitepress/components/selectTree/index.md
@@ -83,7 +83,7 @@ app.use(FSelectTree);
 | childrenField         | 替代 `TreeOption` 中的 `children` 字段名                                | string                                    | `children` |
 | valueField            | 替代 `TreeOption` 中的 `value` 字段名                                   | string                                    | `value`    |
 | labelField            | 替代 `TreeOption` 中的 `label` 字段名                                   | string                                    | `label`    |
-| optionLabelField    | 配置选中选项显示的字段名                                                    | string  | `label`    |
+| optionLabelField    | 配置选中选项显示的字段名，不传时跟`labelField`一致                                                      | string  | -    |
 | remote                | 是否异步获取选项，和 `onLoad` 配合                                      | boolean                                   | `false`    |
 | loadData              | 异步加载数据的回调函数                                                  | (node: TreeOption) => Promise\<void\>     | `null`     |
 | inline                | 底层节点是否横向排列                                                    | boolean                                   | `false`    |

From ff2fc901dd67d93959a5d0276754bf511c30388b Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Mon, 14 Mar 2022 11:11:07 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E9=99=8D=E4=BD=8E=E7=82=B9=E9=80=9F?=
 =?UTF-8?q?=E9=80=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/select/select.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/select/select.vue b/components/select/select.vue
index 343c8937..4dbbcafc 100644
--- a/components/select/select.vue
+++ b/components/select/select.vue
@@ -207,9 +207,10 @@ export default defineComponent({
                     if (isLimitRef.value) return;
                 }
             } else {
+                // 体验更好
                 setTimeout(() => {
                     filterText.value = '';
-                }, 1000);
+                }, 400);
                 isOpenedRef.value = false;
             }
             updateCurrentValue(unref(value));