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.
ant-design-vue/components/table/demo/fixed-header.md

51 lines
893 B

<cn>
#### 固定表头
方便一页内展示大量数据。
需要指定 column 的 `width` 属性,否则列头和内容可能不对齐。
</cn>
<us>
#### Fixed Header
Display large amounts of data in scrollable view.
> Specify the width of each column if header and cell do not align properly.
</us>
```html
<template>
<a-table :columns="columns" :dataSource="data" :pagination="{ pageSize: 50 }" :scroll="{ y: 240 }" />
</template>
<script>
const columns = [{
title: 'Name',
dataIndex: 'name',
width: 150,
}, {
title: 'Age',
dataIndex: 'age',
width: 150,
}, {
title: 'Address',
dataIndex: 'address',
}];
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}`,
});
}
export default {
data() {
return {
data,
columns,
}
}
}
</script>
```