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

67 lines
1.1 KiB
Markdown
Raw Normal View History

# Selection
2020-02-04 22:43:40 +08:00
Rows can be selectable by making first column's type as `selection`.
```html
2020-01-31 17:02:33 +08:00
<div>You have selected {{ checkedRowKeys.length }} row{{ checkedRowKeys.length < 2 ? '': 's'}}.</div>
<n-data-table
ref="table"
:columns="columns"
:data="data"
:pagination="pagination"
2020-03-09 16:31:27 +08:00
:row-key="row => row.address"
2020-01-31 17:02:33 +08:00
@checked-row-keys-change="handleCheck"
/>
```
```js
const columns = [
{
2020-01-10 14:43:10 +08:00
type: 'selection',
disabled (row, index) {
return row.name === 'Edward King 3'
}
},
{
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) => ({
name: `Edward King ${index}`,
age: 32,
address: `London, Park Lane no. ${index}`
}))
export default {
data() {
return {
data,
columns,
2020-01-31 17:02:33 +08:00
checkedRowKeys: [],
2020-01-10 14:43:10 +08:00
pagination: {
pageSize: 5
}
}
},
methods: {
sendMail(rowData) {
2020-01-10 14:43:10 +08:00
this.$NMessage.info('send mail to ' + rowData.name)
},
2020-01-31 17:02:33 +08:00
handleCheck (rowKeys) {
this.checkedRowKeys = rowKeys
}
}
}
```