feat: select提供选项定制和回显内容定制 (#69)

* feat: select提供选项定制和回显内容定制 * fix: 修复bug * doc: 更新文档 * fix: 降低点速速
WeBankFinTech · Mar 14, 2022 · cbc9c45 · cbc9c45
1 parent 941ce15
commit cbc9c45
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 40 deletions.
diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue
@@ -292,12 +292,22 @@ 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) => {
+                    if (props.optionLabelField) {
+                        return {
+                            ...option,
+                            label: option[props.optionLabelField],
+                        };
+                    }
+                    return option;
+                }),
         );
 
         const focus = (e: Event) => {

diff --git 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
@@ -70,6 +70,7 @@ export const selectProps = {
         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
@@ -40,6 +40,7 @@
                     :onSelect="onSelect"
                     :isLimit="isLimitRef"
                     :emptyText="listEmptyText"
+                    :renderOption="$slots.option"
                     @scroll="onScroll"
                     @mousedown.prevent
                 />
@@ -62,6 +63,7 @@ import {
     onMounted,
     CSSProperties,
     defineComponent,
+    nextTick,
 } from 'vue';
 import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
@@ -197,14 +199,18 @@ 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 = '';
+                }, 400);
                 isOpenedRef.value = false;
             }
             updateCurrentValue(unref(value));
@@ -219,9 +225,17 @@ export default defineComponent({
                 const getOption = (val: SelectValue) => {
                     let cacheOption;
                     if (newOptions && newOptions.length) {
-                        cacheOption = newOptions.find(
-                            (option) => option.value === val,
-                        );
+                        cacheOption = newOptions
+                            .map((option) => {
+                                if (props.optionLabelField) {
+                                    return {
+                                        ...option,
+                                        label: option[props.optionLabelField],
+                                    };
+                                }
+                                return option;
+                            })
+                            .find((option) => option.value === val);
                         if (cacheOption) {
                             return cacheOption;
                         }

diff --git 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 → ...epress/components/select/customOption.vue b/docs/.vitepress/components/select/label.vue → ...epress/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
@@ -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    | 配置选中选项显示的字段名，不传时跟`labelField`一致                                              | string  | -    |
 
 ## 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
@@ -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
@@ -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    | 配置选中选项显示的字段名，不传时跟`labelField`一致                                                      | string  | -    |
 | 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
@@ -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>