From 0ea8a2d1255cb0dd054f69280d65defd0be79c40 Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Tue, 13 Aug 2024 15:57:46 +0800 Subject: [PATCH] =?UTF-8?q?feat(SelectCascader):=20=E5=A2=9E=E5=8A=A0=20fi?= =?UTF-8?q?lterTextHightlight=20=E8=BF=87=E6=BB=A4=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA=E7=9A=84?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/select-cascader/selectCascader.vue | 2 + .../components/selectCascader/filterable.vue | 76 ++++++++++--------- .../components/selectCascader/index.md | 54 ++++++------- 3 files changed, 71 insertions(+), 61 deletions(-) diff --git a/components/select-cascader/selectCascader.vue b/components/select-cascader/selectCascader.vue index dc5601bc3..1705c80cc 100644 --- a/components/select-cascader/selectCascader.vue +++ b/components/select-cascader/selectCascader.vue @@ -70,6 +70,8 @@ :isSelect="filterIsSelect" :onSelect="handleFilterSelect" :emptyText="filterEmptyText" + :filterText="filterText" + :filterTextHighlight="filterTextHighlight" @mousedown.prevent /> diff --git a/docs/.vitepress/components/selectCascader/filterable.vue b/docs/.vitepress/components/selectCascader/filterable.vue index 13a678bbc..5114c8032 100644 --- a/docs/.vitepress/components/selectCascader/filterable.vue +++ b/docs/.vitepress/components/selectCascader/filterable.vue @@ -6,64 +6,75 @@ 是 + + + - -
- 单选默认： + + -
-
- 单选自定义过滤函数： + + -
- + + - -
- 多选默认： + + -
-
- 多选自定义过滤函数： + + -
- + + - @@ -125,3 +125,9 @@ export default { width: 100%; } + + diff --git a/docs/.vitepress/components/selectCascader/index.md b/docs/.vitepress/components/selectCascader/index.md index 41be40383..3ebe2f69d 100644 --- a/docs/.vitepress/components/selectCascader/index.md +++ b/docs/.vitepress/components/selectCascader/index.md @@ -82,33 +82,34 @@ nodata.vue ## SelectCascader Props -| 属性 | 说明 | 类型 | 默认值 | -| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | --------------------- | -| modelValue / v-model | 选中的值 | number / string / boolean / object | - | -| data | 展示数据 | Array\ | `[]` | -| appendToContainer | 弹窗内容是否添加到指定的 DOM 元素 | boolean | `true` | -| clearable | 是否显示清除按钮 | boolean | `false` | -| disabled | 是否禁用 | boolean | `false` | -| filterable | 是否支持过滤选项（`remote`被设定时不生效） | boolean | `false` | -| filter | 自定义过滤函数 | (pattern: string, option: TreeOption) => boolean | `-` | -| collapseTags | 多选时选中项是否折叠展示 | boolean | `false` | -| collapseTagsLimit | 多选时选中项超出限制个数后才会折叠 | number | `1` | -| tagBordered | 多选时，选中项展示是否有边框（disabled 为 true 时强制有边框） | boolean | `false` | -| emptyText | 选项为空时显示的文字，也可以使用#empty 设置 | string | `无数据` | -| getContainer | 指定下拉选项挂载的 HTML 节点 | () => HTMLElement | `() => document.body` | -| multiple | 是否多选 | boolean | `false` | -| placeholder | 当没有选择内容时的提示语 | string | - | -| expandedKeys(v-model) | 展开的节点的 key 的数组 | Array\ | `[]` | -| cascade | `checkable` 状态下节点选择完全受控（父子节点选中状态关联） | boolean | `false` | +| 属性 | 说明 | 类型 | 默认值 | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | --------------------- | +| modelValue / v-model | 选中的值 | number / string / boolean / object | - | +| data | 展示数据 | Array\ | `[]` | +| appendToContainer | 弹窗内容是否添加到指定的 DOM 元素 | boolean | `true` | +| clearable | 是否显示清除按钮 | boolean | `false` | +| disabled | 是否禁用 | boolean | `false` | +| filterable | 是否支持过滤选项（`remote`被设定时不生效） | boolean | `false` | +| filter | 自定义过滤函数 | (pattern: string, option: TreeOption) => boolean | `-` | +| filterTextHighlight | 过滤文本是否高亮 | boolean | `false` | +| collapseTags | 多选时选中项是否折叠展示 | boolean | `false` | +| collapseTagsLimit | 多选时选中项超出限制个数后才会折叠 | number | `1` | +| tagBordered | 多选时，选中项展示是否有边框（disabled 为 true 时强制有边框） | boolean | `false` | +| emptyText | 选项为空时显示的文字，也可以使用#empty 设置 | string | `无数据` | +| getContainer | 指定下拉选项挂载的 HTML 节点 | () => HTMLElement | `() => document.body` | +| multiple | 是否多选 | boolean | `false` | +| placeholder | 当没有选择内容时的提示语 | string | - | +| expandedKeys(v-model) | 展开的节点的 key 的数组 | Array\ | `[]` | +| cascade | `checkable` 状态下节点选择完全受控（父子节点选中状态关联） | boolean | `false` | | checkStrictly | 设置勾选策略来指定勾选回调返回的值。
多选时，`all` 表示回调函数值为全部选中节点；`parent` 表示回调函数值为父节点（当父节点下所有子节点都选中时）；`child` 表示回调函数值为子节点。
单选时，`all` 表示回调函数值可为父节点；`child` 表示回调函数值为子节点。 | string | `child` | -| childrenField | 替代 `CascaderOption` 中的 `children` 字段名 | string | `children` | -| valueField | 替代 `CascaderOption` 中的 `value` 字段名 | string | `value` | -| labelField | 替代 `CascaderOption` 中的 `label` 字段名 | string | `label` | -| remote | 是否异步获取选项，和 `loadData` 配合 | boolean | `false` | -| loadData | 异步加载数据的回调函数 | (node: null \| CascaderOption) => Promise\ | - | -| expandTrigger | 次级菜单的展开方式，可选值为`click`,`hover` | string | `click` | -| emitPath | `modelValue` 是否返回选中节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值。 | boolean | `false` | -| showPath | 是否在选择器中显示选项路径 | boolean | `false` | +| childrenField | 替代 `CascaderOption` 中的 `children` 字段名 | string | `children` | +| valueField | 替代 `CascaderOption` 中的 `value` 字段名 | string | `value` | +| labelField | 替代 `CascaderOption` 中的 `label` 字段名 | string | `label` | +| remote | 是否异步获取选项，和 `loadData` 配合 | boolean | `false` | +| loadData | 异步加载数据的回调函数 | (node: null \| CascaderOption) => Promise\ | - | +| expandTrigger | 次级菜单的展开方式，可选值为`click`,`hover` | string | `click` | +| emitPath | `modelValue` 是否返回选中节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值。 | boolean | `false` | +| showPath | 是否在选择器中显示选项路径 | boolean | `false` | ## SelectCascader Events @@ -120,6 +121,7 @@ nodata.vue | blur | 当选择器失去焦点时触发 | event | | focus | 当选择器获得焦点时触发 | event | | clear | 点击清除按钮时触发 | event | +| filter | 过滤事件 | ( query: String) | ## SelectCascader Methods