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

75 lines
1.1 KiB
Markdown
Raw Normal View History

# Ellipsis
2020-01-31 17:02:33 +08:00
Ellipsize cell content via setting `column.ellipsis`.
```html
<n-data-table
2020-01-10 14:43:10 +08:00
ref='table'
:columns='columns'
:data='data'
:pagination='pagination'
/>
```
```js
2020-01-10 14:43:10 +08:00
const columns = [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address',
width: 100,
ellipsis: true
},
{
title: 'Another Address',
key: 'anotherAddress',
width: 100,
ellipsis: true
}
]
const data = [
{
2020-01-31 17:02:33 +08:00
key: 0,
2020-01-10 14:43:10 +08:00
name: 'John Brown',
age: 32,
2020-01-10 14:43:10 +08:00
address: 'New York No. 1 Lake Park',
anotherAddress: 'New York No. 1 Lake Park'
},
{
2020-01-31 17:02:33 +08:00
key: 1,
2020-01-10 14:43:10 +08:00
name: 'Jim Green',
age: 42,
2020-01-10 14:43:10 +08:00
address: 'London No. 1 Lake Park',
anotherAddress: 'New York No. 1 Lake Park'
},
{
2020-01-31 17:02:33 +08:00
key: 2,
2020-01-10 14:43:10 +08:00
name: 'Joe Black',
age: 32,
2020-01-10 14:43:10 +08:00
address: 'Sidney No. 1 Lake Park',
anotherAddress: 'New York No. 1 Lake Park'
}
]
2020-01-10 14:43:10 +08:00
export default {
2020-01-10 14:43:10 +08:00
data () {
return {
2020-01-10 14:43:10 +08:00
data,
columns,
pagination: { pageSize: 10 }
}
},
methods: {
sendMail(rowData) {
2020-01-10 14:43:10 +08:00
this.$NMessage.info('Send mail to ' + rowData.name)
}
}
}
```