2019-12-12 15:30:29 +08:00
|
|
|
# Ellipsis
|
2020-01-31 17:02:33 +08:00
|
|
|
Ellipsize cell content via setting `column.ellipsis`.
|
2019-12-12 15:30:29 +08:00
|
|
|
```html
|
2019-12-31 21:01:24 +08:00
|
|
|
<n-data-table
|
2020-01-10 14:43:10 +08:00
|
|
|
ref='table'
|
|
|
|
:columns='columns'
|
|
|
|
:data='data'
|
|
|
|
:pagination='pagination'
|
2020-01-05 22:46:13 +08:00
|
|
|
/>
|
2019-12-12 15:30:29 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
```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
|
|
|
|
}
|
|
|
|
]
|
2019-12-12 15:30:29 +08:00
|
|
|
|
|
|
|
const data = [
|
|
|
|
{
|
2020-01-31 17:02:33 +08:00
|
|
|
key: 0,
|
2020-01-10 14:43:10 +08:00
|
|
|
name: 'John Brown',
|
2019-12-12 15:30:29 +08:00
|
|
|
age: 32,
|
2020-01-10 14:43:10 +08:00
|
|
|
address: 'New York No. 1 Lake Park',
|
|
|
|
anotherAddress: 'New York No. 1 Lake Park'
|
2019-12-12 15:30:29 +08:00
|
|
|
},
|
|
|
|
{
|
2020-01-31 17:02:33 +08:00
|
|
|
key: 1,
|
2020-01-10 14:43:10 +08:00
|
|
|
name: 'Jim Green',
|
2019-12-12 15:30:29 +08:00
|
|
|
age: 42,
|
2020-01-10 14:43:10 +08:00
|
|
|
address: 'London No. 1 Lake Park',
|
|
|
|
anotherAddress: 'New York No. 1 Lake Park'
|
2019-12-12 15:30:29 +08:00
|
|
|
},
|
|
|
|
{
|
2020-01-31 17:02:33 +08:00
|
|
|
key: 2,
|
2020-01-10 14:43:10 +08:00
|
|
|
name: 'Joe Black',
|
2019-12-12 15:30:29 +08:00
|
|
|
age: 32,
|
2020-01-10 14:43:10 +08:00
|
|
|
address: 'Sidney No. 1 Lake Park',
|
|
|
|
anotherAddress: 'New York No. 1 Lake Park'
|
2019-12-12 15:30:29 +08:00
|
|
|
}
|
2020-01-05 22:46:13 +08:00
|
|
|
]
|
2020-01-10 14:43:10 +08:00
|
|
|
|
2019-12-12 15:30:29 +08:00
|
|
|
export default {
|
2020-01-10 14:43:10 +08:00
|
|
|
data () {
|
2019-12-12 15:30:29 +08:00
|
|
|
return {
|
2020-01-10 14:43:10 +08:00
|
|
|
data,
|
|
|
|
columns,
|
2020-01-06 17:31:52 +08:00
|
|
|
pagination: { pageSize: 10 }
|
2019-12-12 15:30:29 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
sendMail(rowData) {
|
2020-01-10 14:43:10 +08:00
|
|
|
this.$NMessage.info('Send mail to ' + rowData.name)
|
2019-12-12 15:30:29 +08:00
|
|
|
}
|
|
|
|
}
|
2020-01-05 22:46:13 +08:00
|
|
|
}
|
2019-12-12 15:30:29 +08:00
|
|
|
```
|