You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< docs >
-- -
order : 12
title :
zh - CN : 固定表头
en - US : Fixed Header
-- -
# # zh - CN
方便一页内展示大量数据 。
> 需要指定 column 的 ` width ` 属性 ， 否则列头和内容可能不对齐 。 如果指定 ` width ` 不生效或出现白色垂直空隙 ， 请尝试建议留一列不设宽度以适应弹性布局 ， 或者检查是否有超长连续字段破坏布局 。
# # en - US
Display large amounts of data in scrollable view .
> Specify width of columns if header and cell do not align properly . If specified width is not working or have gutter between columns , please try to leave one column at least without width to fit fluid layout , or make sure no long word to break table layout .
< / docs >
< template >
< a -table
:columns ="columns"
:data-source ="data"
: pagination = "{ pageSize: 50 }"
: scroll = "{ y: 240 }"
/ >
< / template >
< script lang = "ts" setup >
const columns = [
{
title : 'Name' ,
dataIndex : 'name' ,
width : 150 ,
} ,
{
title : 'Age' ,
dataIndex : 'age' ,
width : 150 ,
} ,
{
title : 'Address' ,
dataIndex : 'address' ,
} ,
] ;
const data = [ ... Array ( 100 ) ] . map ( ( _ , i ) => ( {
key : i ,
name : ` Edward King ${ i } ` ,
age : 32 ,
address : ` London, Park Lane no. ${ i } ` ,
} ) ) ;
< / script >
