feat(SelectTree): 增加 filterTextHighlight 过滤文本是否高亮显示的配置项 (#878)

* docs(SelectTree): 代码规范 * feat(SelectTree): 增加 filterTextHighlight 过滤文本是否高亮显示的配置项 * docs(Select): 可过滤示例补充
WeBankFinTech · Aug 13, 2024 · 6617e20 · 6617e20
1 parent e348788
commit 6617e20
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 40 deletions.
diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue
@@ -61,6 +61,8 @@
                         virtualList
                         :style="dropdownStyle"
                         :class="`${prefixCls}-dropdown is-max-height`"
+                        :filterText="filterText"
+                        :filterTextHighlight="filterTextHighlight"
                         @update:nodeList="onChangeNodeList"
                         @select="handleSelect"
                         @check="handleCheck"
@@ -101,6 +103,8 @@
                             :inline="inline"
                             :remote="remote"
                             :loadData="loadData"
+                            :filterText="filterText"
+                            :filterTextHighlight="filterTextHighlight"
                             @update:nodeList="onChangeNodeList"
                             @select="handleSelect"
                             @check="handleCheck"
@@ -200,6 +204,7 @@ export default defineComponent({
         'focus',
         'blur',
         'clear',
+        'filter',
     ],
     setup(props, { emit, attrs }) {
         useTheme();
@@ -409,6 +414,7 @@ export default defineComponent({
 
         const handleFilterTextChange = (val: string) => {
             filterText.value = val;
+            emit('filter', val);
         };
 
         const refTree = ref(null);
@@ -473,6 +479,7 @@ export default defineComponent({
             isError,
             attrs,
             innerDisabled,
+            filterText,
         };
     },
 });

diff --git a/components/tree/props.ts b/components/tree/props.ts
@@ -111,6 +111,8 @@ export const treeProps = {
         type: Boolean,
         default: false,
     },
+    filterText: String,
+    filterTextHighlight: Boolean,
 } as const satisfies ComponentObjectPropsOptions;
 
 export const treePropsDefaultValue = extractPropsDefaultValue(treeProps);

diff --git a/components/tree/treeNode.tsx b/components/tree/treeNode.tsx
@@ -14,6 +14,7 @@ import CaretDownOutlined from '../icon/CaretDownOutlined';
 import LoadingOutlined from '../icon/LoadingOutlined';
 import Checkbox from '../checkbox';
 import FEllipsis from '../ellipsis';
+import TextHightlight from '../text-highlight';
 import { COMPONENT_NAME, INDENT } from './const';
 import useTreeNode from './useTreeNode';
 
@@ -253,8 +254,16 @@ export default defineComponent({
             return (
                 <FEllipsis
                     class={`${prefixCls}-content-label`}
-                    content={props.label}
-                />
+                >
+                    {root.props.filterTextHighlight && root.props.filterText
+                        ? (
+                            <TextHightlight strict searchValues={[root.props.filterText]}>
+                                {props.label}
+                            </TextHightlight>
+                            )
+                        : props.label
+                    }
+                </FEllipsis>
             );
         };
 

diff --git a/docs/.vitepress/components/select/filterable.vue b/docs/.vitepress/components/select/filterable.vue
@@ -43,7 +43,10 @@
                         :key="item.label"
                         :value="item.value"
                     >
-                        <FTextHighlight :searchValues="[filterText]" strict>{{ item.label }}</FTextHighlight>
+                        <FEllipsis>
+                            <FTextHighlight v-if="filterText" :searchValues="[filterText]" strict>{{ item.label }}</FTextHighlight>
+                            <template v-else>{{ item.label }}</template>
+                        </FEllipsis>
                     </FOption>
                 </FSelectGroupOption>
             </FSelect>
@@ -60,7 +63,7 @@ const filterTextHighlight = ref(false);
 const optionList = reactive([
     {
         value: 'HuNan',
-        label: '湖南',
+        label: '湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南',
     },
     {
         value: 'HuBei',
@@ -91,7 +94,7 @@ const cityOptions = [
             },
             {
                 value: '湖南',
-                label: '湖南',
+                label: '湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南',
             },
             {
                 value: '河南',

diff --git a/docs/.vitepress/components/selectTree/filterable.vue b/docs/.vitepress/components/selectTree/filterable.vue
@@ -1,24 +1,42 @@
 <template>
-    <FSpace>
-        <div>
-            默认：
-            <FSelectTree :data="data" filterable virtualList />
-        </div>
+    <FForm>
+        <FFormItem label="是否高亮:">
+            <FRadioGroup
+                v-model="filterTextHighlight"
+                :options="[
+                    { label: '否(默认)', value: false },
+                    { label: '是', value: true },
+                ]"
+            />
+        </FFormItem>
+    </FForm>
+
+    <FDivider />
 
-        <div>
-            自定义过滤函数：
+    <FForm :labelWidth="130">
+        <FFormItem label="默认:">
+            <FSelectTree :data="data" filterable :filterTextHighlight="filterTextHighlight" @filter="handleFilter" />
+        </FFormItem>
+        <FFormItem label="自定义过滤函数:">
             <FSelectTree
                 :data="data"
                 filterable
                 :filter="filter"
                 virtualList
+                :filterTextHighlight="filterTextHighlight"
             />
-        </div>
-    </FSpace>
+        </FFormItem>
+    </FForm>
 </template>
 
-<script>
-import { reactive } from 'vue';
+<script setup>
+import { reactive, ref } from 'vue';
+
+const filterTextHighlight = ref(false);
+
+function handleFilter(query) {
+    console.log('[selectTree.filterable] filter:', query);
+}
 
 function createData(level = 4, baseKey = '') {
     if (!level) {
@@ -49,17 +67,9 @@ function createLabel(level) {
     }
 }
 
-export default {
-    setup() {
-        const data = reactive(createData(4));
-        const filter = (text, option) => {
-            return option.label.indexOf(text) !== -1;
-        };
-        return {
-            data,
-            filter,
-        };
-    },
+const data = reactive(createData(4));
+const filter = (text, option) => {
+    return option.label.indexOf(text) !== -1;
 };
 </script>
 

diff --git a/docs/.vitepress/components/selectTree/index.md b/docs/.vitepress/components/selectTree/index.md
@@ -16,50 +16,67 @@ app.use(FSelectTree);
 
 适用广泛的基础单选
 
---COMMON
+:::demo
+common.vue
+:::
 
 ### 可清空
 
 包含清空按钮，可将选择器清空为初始状态
 
---CLEARABLE
+:::demo
+clearable.vue
+:::
 
 ### 基础多选
 
 适用性较广的基础多选，用 `Tag` 展示已选项
 
---MULTIPLE
+:::demo
+multiple.vue
+:::
 
 ### 可搜索
 
 可以利用搜索功能快速查找选项
 
---FILTERABLE
+:::demo
+filterable.vue
+:::
 
 ### 禁用状态
 
 选择器不可用状态
 
---DISABLED
+:::demo
+disabled.vue
+:::
 
 ### 虚拟列表
 
 设置`virtualList`属性，处理大数据。
---VIRTUALLIST
+
+:::demo
+virtualList.vue
+:::
 
 ### 控制回填内容
 
---LABELFIELD
+:::demo
+labelField.vue
+:::
 
 ### 无数据
 
---NODATA
+:::demo
+nodata.vue
+:::
 
 ### 获取选中路径
 
---WITHPATH
-
---CODE
+:::demo
+withPath.vue
+:::
 
 ## SelectTree Props
 
@@ -79,6 +96,7 @@ app.use(FSelectTree);
 | modelValue / v-model  | 选中的值                                                                                                                                                                | number / string / array                          | -                     |
 | filterable            | 是否支持过滤选项                                                                                                                                                        | boolean                                          | `false`               |
 | filter                | 自定义过滤函数                                                                                                                                                          | (pattern: string, option: TreeOption) => boolean | `-`                   |
+| filterTextHighlight   | 过滤文本是否高亮                                                                                                                                                        | boolean                                          | `false`               |
 | data                  | 展示数据                                                                                                                                                                | Array\<TreeOption\>                              | `[]`                  |
 | accordion             | 手风琴模式，是否保持同级节点中只有一个节点展开                                                                                                                          | boolean                                          | `false`               |
 | defaultExpandAll      | 是否默认展开所有节点，当有 `expandedKeys` 时，`defaultExpandAll` 将失效                                                                                                 | boolean                                          | `false`               |
@@ -105,6 +123,7 @@ app.use(FSelectTree);
 | blur          | 当选择器失去焦点时触发                                                       | event                         |
 | focus         | 当选择器获得焦点时触发                                                       | event                         |
 | clear         | 点击清除按钮时触发                                                           | event                         |
+| filter        | 过滤事件                                                                     | ( query: String)              |
 
 ## SelectTree Methods
 

diff --git a/docs/.vitepress/components/selectTree/multiple.vue b/docs/.vitepress/components/selectTree/multiple.vue
@@ -5,7 +5,9 @@
         <FRadio value="parent">parent</FRadio>
         <FRadio value="child">child</FRadio>
     </FRadioGroup>
-    <br>
+
+    <FDivider />
+
     <FSelectTree
         :data="data"
         multiple

diff --git a/docs/.vitepress/components/selectTree/withPath.vue b/docs/.vitepress/components/selectTree/withPath.vue
@@ -19,6 +19,9 @@
                 <FRadio value="child">child</FRadio>
             </FRadioGroup>
         </FFormItem>
+
+        <FDivider />
+
         <FFormItem label="单选：">
             <FSelectTree
                 v-model="singleValue"

diff --git a/docs/.vitepress/components/tree/common.vue b/docs/.vitepress/components/tree/common.vue
@@ -49,7 +49,6 @@ function createLabel(level) {
 export default {
     setup() {
         const data1 = reactive(createData(3));
-        console.log(JSON.stringify(data1, null, 2));
         const data2 = [
             {
                 label: '二生三',