github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: select add filterSort virtual listHeight, close #5310

Browse Source
pull/4696/head
tangjinzhou 3 years ago
parent fe4c3e60bf
commit fc3bd1cba0
2 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File

3
components/select/index.en-US.md
Unescape View File

@ -39,9 +39,11 @@ Select component to select value from options.
| dropdownStyle | style of dropdown menu | object | - | | | dropdownStyle | style of dropdown menu | object | - | |
| fieldNames | Customize node label, value, options field name | object | { label: `label`, value: `value`, options: `options` } | 3.0 | | 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 | | | 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\[] | - | | | 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 | | | 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 | | | 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 | | | loading | indicate loading state | Boolean | false | |
| maxTagCount | Max tag count to show | number | - | | | maxTagCount | Max tag count to show | number | - | |
| maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - | | | 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 | - | | | 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\[] | | | | tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | | |
| value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - | | | 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 . > 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 .

3
components/select/index.zh-CN.md
Unescape View File

@ -40,9 +40,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
| dropdownStyle | 下拉菜单的 style 属性 | object | - | | | dropdownStyle | 下拉菜单的 style 属性 | object | - | |
| fieldNames | 自定义节点 label、value、options 的字段 | object | { label: `label`, value: `value`, options: `options` } | 3.0 | | 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 | | | 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\[] | - | | | firstActiveValue | 默认高亮的选项 | string\|string\[] | - | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body | | | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body | |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes}` 的格式 | boolean | false | | | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: vNodes}` 的格式 | boolean | false | |
| listHeight | 设置弹窗滚动高度 | number | 256 | |
| maxTagCount | 最多显示多少个 tag | number | - | | | maxTagCount | 最多显示多少个 tag | number | - | |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - | | | maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - | |
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | | | 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 | | tagRender | 自定义 tag 内容 render，仅在 `mode` 为 `multiple` 或 `tags` 时生效 | slot \| (props) => any | - | 3.0 |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | | | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | |
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - | | | value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - | |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 3.0 |
> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。 > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。

Write Preview
Loading…
Cancel
Save