From fc3bd1cba015ddb1cb1d61d2f26fccc81976c741 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 12 Mar 2022 10:16:27 +0800 Subject: [PATCH] feat: select add filterSort virtual listHeight, close #5310 --- components/select/index.en-US.md | 3 +++ components/select/index.zh-CN.md | 3 +++ 2 files changed, 6 insertions(+) diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 04aab0c710..41867c3222 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -39,9 +39,11 @@ Select component to select value from options. | dropdownStyle | style of dropdown menu | object | - | | | fieldNames | Customize node label, value, options field name | object | { label: `label`, value: `value`, options: `options` } | 3.0 | | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | | +| filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction | (optionA: Option, optionB: Option) => number | - | 3.0 | | firstActiveValue | Value of action option by default | string\|string\[] | - | | | getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. | function(triggerNode) | () => document.body | | | labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: vNodes}` | boolean | false | | +| listHeight | Config popup height | number | 256 | | | loading | indicate loading state | Boolean | false | | | maxTagCount | Max tag count to show | number | - | | | maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - | | @@ -64,6 +66,7 @@ Select component to select value from options. | tagRender | Customize tag render, only applies when `mode` is set to `multiple` or `tags` | slot \| (props) => any | - | | | tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | | | | value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - | | +| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 | > Note, if you find that the drop-down menu scrolls with the page, or you need to trigger Select in other popup layers, please try to use `getPopupContainer={triggerNode => triggerNode.parentElement}` to fix the drop-down popup rendering node in the parent element of the trigger . diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 2a92dd2ba7..5d456c8c17 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -40,9 +40,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg | dropdownStyle | 下拉菜单的 style 属性 | object | - | | | fieldNames | 自定义节点 label、value、options 的字段 | object | { label: `label`, value: `value`, options: `options` } | 3.0 | | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | | +| filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的 compareFunction | (optionA: Option, optionB: Option) => number | - | 3.0 | | firstActiveValue | 默认高亮的选项 | string\|string\[] | - | | | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body | | | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes}` 的格式 | boolean | false | | +| listHeight | 设置弹窗滚动高度 | number | 256 | | | maxTagCount | 最多显示多少个 tag | number | - | | | maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - | | | maxTagTextLength | 最大显示的 tag 文本长度 | number | - | | @@ -64,6 +66,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg | tagRender | 自定义 tag 内容 render，仅在 `mode` 为 `multiple` 或 `tags` 时生效 | slot \| (props) => any | - | 3.0 | | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | | | value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - | | +| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 3.0 | > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。