ant-design-vue/components/table/demo/fixed-header.md

60 lines
1.1 KiB
Markdown
Raw Normal View History

2018-04-03 06:34:54 +00:00
<cn>
#### 固定表头
方便一页内展示大量数据。
2019-04-30 08:59:53 +00:00
需要指定 column 的 `width` 属性,否则列头和内容可能不对齐。(建议留一列不设宽度以适应弹性布局)
2018-04-03 06:34:54 +00:00
</cn>
<us>
#### Fixed Header
Display large amounts of data in scrollable view.
2019-04-30 08:59:53 +00:00
> Specify width of columns if header and cell do not align properly.(Leave one column at least without width to fit fluid layout)
2018-04-03 06:34:54 +00:00
</us>
2019-10-09 10:32:23 +00:00
```tpl
2018-04-03 06:34:54 +00:00
<template>
2019-09-28 12:45:07 +00:00
<a-table
:columns="columns"
:dataSource="data"
:pagination="{ pageSize: 50 }"
:scroll="{ y: 240 }"
/>
2018-04-03 06:34:54 +00:00
</template>
<script>
2019-09-28 12:45:07 +00:00
const columns = [
{
title: 'Name',
dataIndex: 'name',
width: 150,
},
{
title: 'Age',
dataIndex: 'age',
width: 150,
},
{
title: 'Address',
dataIndex: 'address',
},
];
2018-04-03 06:34:54 +00:00
2019-09-28 12:45:07 +00:00
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
2018-04-03 06:34:54 +00:00
}
2019-09-28 12:45:07 +00:00
export default {
data() {
return {
data,
columns,
};
},
};
2018-04-03 06:34:54 +00:00
</script>
```