[cdk:VirtualList] 新增虚拟列表组件

[danranVm]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

通过仅渲染那些屏幕上可见的条目，来高效的显示大型列表。参考自 rc-virtual-list

何时使用

数据量过多时，用于提升页面渲染性能。

API

ix-virtual-list

Props

名称	说明	类型	默认值	全局配置	备注
component	自定义列表的容器节点	string \| Component	div	-	-
data	需要渲染的数据列表	Array	[]	-	-
fullHeight	是否永远使用 height 作为容器高度	boolean	false	-	仅在不符合虚拟滚动条件时生效
height	列表的高度	number	0	-	设置为大于 0 时才可以启用虚拟滚动
itemHeight	列表项的高度	number	0	-	设置为大于 0 时才可以启用虚拟滚动
itemKey	列表项的唯一标识	string \| number \| (item) => string \| number	-	-	必须设置
itemRender	列表项的渲染函数	(option: { item: T; index: number }) => VNodeTypes \| v-slot:item={item, index}	-	-	必须设置或者提供 item 插槽
virtual	是否开启虚拟滚动	boolean	true	-	-

Emits

名称	说明	参数类型	备注
scroll	滚动事件	(evt: Event) => void	-

Method

名称	说明	参数类型	备注
scrollTo	手动设置滚动条位置	(value?: number \| ScrollToConfig) => void	-

[idux-bot[bot]]

Translation of this issue:

[CDK: Virtual-List] Add a virtual list component

• [] I have search the [Issues] (https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.

What proBLEES THIS Feature SOLVE?

What does the proposed API Look Like?

It is highly valid to display large lists by rendering only those visible on those on the screen. Reference from [RC-Virtual-List] (https://github.com/react-component/virtual-list)

When is using

The amount of data is too much for enhancing the page rendering performance.

API

ix-virtual-list

p p

Name	Description	Type	Default	Global Configuration	Remarks
Component	Custom list Container Node	String \ | Component	Div	-	-
Data	Request Data List	Array	[]	-
FullHeight	Whether to useheight as a container height	Boolean	false	-	Just take effect only when you do not meet the virtual scrolling condition
HEIGHT	The height of the list	Number	0	-	Set to be greater than 0 to enable virtual scrolling
ItemHeight	The height of the list item	Number	0	-	Set to be greater than 0 to enable virtual scrolling
ItemKey	List of list items	String \ | Number \ | (item) => string \ | Number	-	Must set
ItemRender	List Item Rendering Functions	(option: {Item: T; Index: Number}) => vNodTypes \ | V-slot: item = {iTEM, INDEX}	-	-	Must set or Provide Item slots
Virtual	Whether to turn on the virtual scroll	Boolean	True	-

EMITS

Name	Description	Parameter Type	Remarks
Scroll	Scroll events	(EVT: Event) => void

METHOD

Name	Description	Parameter Type	Remarks
Scrollto	Manually set scroll bar position	(Value ?: Number \ | scrolltoconfig) => void