mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-11 13:10:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(data-table): column onSelect's type, closes #3430 (#3443)

Browse Source
This commit is contained in:
07akioni 2022-08-07 18:06:49 +08:00 committed by GitHub
parent 824a6ba546
commit 0e355824df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 177 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.en-US.md
View File

@ -10,7 +10,8 @@
- Added `exports` field in package.json [#3410](https://github.com/TuSimple/naive-ui/pull/3410).
- Fix `n-dropdown` option prefix & suffix's z-index, closes [#3433](https://github.com/TuSimple/naive-ui/issues/3433).
- Fix `n-input-number`'s peers theme can't be configured, closes [#3422](https://github.com/TuSimple/naive-ui/issues/3422).
- Added `exports` field in package.json [3410](https://github.com/TuSimple/naive-ui/pull/3410)
- Added `exports` field in package.json.
- Fix `n-data-table` column `onSelect`'s type, closes [#3430](https://github.com/TuSimple/naive-ui/issues/3430)
### Feats

3
CHANGELOG.zh-CN.md
View File

@ -7,10 +7,11 @@
- 修复 `n-menu` extra 在 submenu 中无效，关闭 [#3390](https://github.com/TuSimple/naive-ui/issues/3390)
- 修复 `n-tree` 在传入的节点数据中包含 `type='group'` 时无法展开，关闭 [#3388](https://github.com/TuSimple/naive-ui/issues/3388)
- 修复 `n-pagination` 的 `default-page-size` 没有跟随 `page-sizes` prop，关闭 [#3369](https://github.com/TuSimple/naive-ui/issues/3369)
- 在 package.json 中新增 `exports` [3410](https://github.com/TuSimple/naive-ui/pull/3410)
- 在 package.json 中新增 `exports` 字段
- 修复 `n-dropdown` 选项 prefix & suffix 的 z-index，关闭 [#3433](https://github.com/TuSimple/naive-ui/issues/3433)
- 修复 `n-input-number` 中配置 peers 主题不生效，关闭 [#3422](https://github.com/TuSimple/naive-ui/issues/3422)
- 修复 `n-transfer` 在传入异步的 `options` 报错，关闭 [#3406](https://github.com/TuSimple/naive-ui/issues/3406)
- 修复 `n-data-table` column `onSelect` 的类型，关闭 [#3430](https://github.com/TuSimple/naive-ui/issues/3430)
### Feats

74
src/data-table/demos/enUS/custom-select.demo.md
View File

@ -1,74 +0,0 @@
# Custom selection menu
Set `options` on a selection type column to create selection dropdown near header checkbox.
```html
<n-p>
You have selected {{ checkedRowKeys.length }} row{{ checkedRowKeys.length < 2
? '': 's'}}.
</n-p>
<n-data-table
:columns="columns"
:data="data"
:pagination="pagination"
v-model:checked-row-keys="checkedRowKeys"
/>
```
```js
import { defineComponent, ref } from 'vue'
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
name: `Edward King ${index}`,
age: 32,
address: `London, Park Lane no. ${index}`,
key: index
}))
export default defineComponent({
setup () {
const checkedRowKeysRef = ref([])
return {
checkedRowKeys: checkedRowKeysRef,
data,
pagination: {
pageSize: 6
},
columns: [
{
type: 'selection',
options: [
'all',
'none',
{
label: 'Select first 2 rows',
key: 'f2',
onSelect: (pageData) => {
checkedRowKeysRef.value = pageData
.map((row) => row.key)
.slice(0, 2)
}
}
],
disabled (row, index) {
return row.name === 'Edward King 3'
}
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
]
}
}
})
```

86
src/data-table/demos/enUS/custom-select.demo.vue Normal file
View File

@ -0,0 +1,86 @@
<markdown>
# Custom selection menu
Set `options` on a selection type column to create selection dropdown near header checkbox.
</markdown>
<template>
<n-p>
You have selected {{ checkedRowKeys.length }} row{{
checkedRowKeys.length < 2 ? '' : 's'
}}.
</n-p>
<n-data-table
v-model:checked-row-keys="checkedRowKeys"
:columns="columns"
:data="data"
:pagination="pagination"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { repeat } from 'seemly'
import { DataTableColumns } from 'naive-ui'
type RowData = {
name: string
age: number
address: string
key: number
}
const data = repeat(46, undefined).map<RowData>((_, index) => ({
name: `Edward King ${index}`,
age: 32,
address: `London, Park Lane no. ${index}`,
key: index
}))
export default defineComponent({
setup () {
const checkedRowKeysRef = ref<Array<string | number>>([])
const columns: DataTableColumns<RowData> = [
{
type: 'selection',
options: [
'all',
'none',
{
label: 'Select first 2 rows',
key: 'f2',
onSelect: (pageData) => {
checkedRowKeysRef.value = pageData
.map((row) => row.key)
.slice(0, 2)
}
}
],
disabled (row) {
return row.name === 'Edward King 3'
}
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
]
return {
checkedRowKeys: checkedRowKeysRef,
data,
pagination: {
pageSize: 6
},
columns
}
}
})
</script>

2
src/data-table/demos/enUS/index.demo-entry.md
View File

@ -32,7 +32,7 @@ pagination-behavior-on-filter.vue
multiple-sorter
select.vue
select-single.vue
custom-select
custom-select.vue
group-header.vue
controlled-page.vue
controlled-filter.vue

71
src/data-table/demos/zhCN/custom-select.demo.md
View File

@ -1,71 +0,0 @@
# 自定义选择项菜单
在 `type='selection'` 的列设定 `options` 来在头部勾选框旁边创建下拉菜单。
```html
<n-p>你选中了 {{ checkedRowKeys.length }} 行。</n-p>
<n-data-table
:columns="columns"
:data="data"
:pagination="pagination"
v-model:checked-row-keys="checkedRowKeys"
/>
```
```js
import { defineComponent, ref } from 'vue'
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
name: `Edward King ${index}`,
age: 32,
address: `London, Park Lane no. ${index}`,
key: index
}))
export default defineComponent({
setup () {
const checkedRowKeysRef = ref([])
return {
checkedRowKeys: checkedRowKeysRef,
data,
pagination: {
pageSize: 6
},
columns: [
{
type: 'selection',
options: [
'all',
'none',
{
label: '选中前 2 行',
key: 'f2',
onSelect: (pageData) => {
checkedRowKeysRef.value = pageData
.map((row) => row.key)
.slice(0, 2)
}
}
],
disabled (row, index) {
return row.name === 'Edward King 3'
}
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
]
}
}
})
```

82
src/data-table/demos/zhCN/custom-select.demo.vue Normal file
View File

@ -0,0 +1,82 @@
<markdown>
# 自定义选择项菜单
在 `type='selection'` 的列设定 `options` 来在头部勾选框旁边创建下拉菜单。
</markdown>
<template>
<n-p>你选中了 {{ checkedRowKeys.length }} 行。</n-p>
<n-data-table
v-model:checked-row-keys="checkedRowKeys"
:columns="columns"
:data="data"
:pagination="pagination"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { repeat } from 'seemly'
import { DataTableColumns } from 'naive-ui'
type RowData = {
name: string
age: number
address: string
key: number
}
const data = repeat(46, undefined).map<RowData>((_, index) => ({
name: `Edward King ${index}`,
age: 32,
address: `London, Park Lane no. ${index}`,
key: index
}))
export default defineComponent({
setup () {
const checkedRowKeysRef = ref<Array<string | number>>([])
const columns: DataTableColumns<RowData> = [
{
type: 'selection',
options: [
'all',
'none',
{
label: '选中前 2 行',
key: 'f2',
onSelect: (pageData) => {
checkedRowKeysRef.value = pageData
.map((row) => row.key)
.slice(0, 2)
}
}
],
disabled (row) {
return row.name === 'Edward King 3'
}
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
]
return {
checkedRowKeys: checkedRowKeysRef,
data,
pagination: {
pageSize: 6
},
columns
}
}
})
</script>

2
src/data-table/demos/zhCN/index.demo-entry.md
View File

@ -32,7 +32,7 @@ pagination-behavior-on-filter.vue
multiple-sorter
select.vue
select-single.vue
custom-select
custom-select.vue
group-header.vue
controlled-page.vue
controlled-filter.vue

6
src/data-table/src/interface.ts
View File

@ -128,7 +128,7 @@ export type TableSelectionColumn<T = InternalRowData> = {
type: 'selection'
multiple?: boolean
disabled?: (row: T) => boolean
options?: DataTableSelectionOptions
options?: DataTableSelectionOptions<T>
// to suppress type error in utils
sorter?: never
@ -162,9 +162,9 @@ export type TableColumn<T = InternalRowData> =
| TableExpandColumn<T>
export type TableColumns<T = InternalRowData> = Array<TableColumn<T>>
export type DataTableSelectionOptions = Array<
export type DataTableSelectionOptions<T = InternalRowData> = Array<
| DataTableSelectionOption
| { label: string, key: string | number, onSelect: () => void }
| { label: string, key: string | number, onSelect: (pageData: T[]) => void }
>
export interface DataTableInjection {
slots: Slots