naive-ui/demo/documentation/components/dataTable/enUS/fixedHeader.md

56 lines
791 B
Markdown
Raw Normal View History

# Fixed Header
2020-01-31 17:02:33 +08:00
Display large amounts of data in scrollable view by set `max-height`.
```html
<n-data-table
ref="table"
:columns="columns"
:data="data"
:pagination="pagination"
2020-02-04 22:43:40 +08:00
:max-height="250"
/>
```
```js
const columns = [
{
2020-01-10 14:43:10 +08:00
title: 'Name',
key: 'name'
},
{
2020-01-10 14:43:10 +08:00
title: 'Age',
key: 'age'
},
{
2020-01-10 14:43:10 +08:00
title: 'Address',
key: 'address'
}
]
2020-01-10 14:43:10 +08:00
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
2020-01-31 17:02:33 +08:00
key: index,
2020-01-10 14:43:10 +08:00
name: `Edward King ${index}`,
age: 32,
address: `London, Park Lane no. ${index}`
}))
export default {
data() {
return {
2020-01-10 14:43:10 +08:00
data,
columns,
2020-01-10 14:43:10 +08:00
pagination: {
pageSize: 15
}
}
},
methods: {
2020-01-10 14:43:10 +08:00
sendMail (rowData) {
this.$NMessage.info('send mail to ' + rowData.name)
}
}
}
```