mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-03 04:27:41 +08:00
add table demo
This commit is contained in:
tjz
parent
714f15ff7e
commit
5d2271a131
@ -99,13 +99,13 @@ export default {
|
||||
})
|
||||
},
|
||||
rowSelection: {
|
||||
handler: (val) => {
|
||||
handler (val) {
|
||||
if (val &&
|
||||
'selectedRowKeys' in val) {
|
||||
this.store.setState({
|
||||
selectedRowKeys: val.selectedRowKeys || [],
|
||||
})
|
||||
const { rowSelection } = this.props
|
||||
const { rowSelection } = this
|
||||
if (rowSelection && (
|
||||
val.getCheckboxProps !== rowSelection.getCheckboxProps
|
||||
)) {
|
||||
|
||||
@ -32,7 +32,7 @@ const columns = [{
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
width: '20%',
|
||||
slotScopeName: 'name',
|
||||
scopedSlots: { customRender: 'name' },
|
||||
}, {
|
||||
title: 'Gender',
|
||||
dataIndex: 'gender',
|
||||
|
||||
96
components/table/demo/index.vue
Normal file
96
components/table/demo/index.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<script>
|
||||
import Ajax from './ajax.md'
|
||||
import Basic from './basic.md'
|
||||
import Bordered from './bordered.md'
|
||||
import ColspanRowspan from './colspan-rowspan.md'
|
||||
import CustomFilterPanel from './custom-filter-panel.md'
|
||||
import EditCell from './edit-cell.md'
|
||||
import EditRow from './edit-row.md'
|
||||
import ExpandChildren from './expand-children.md'
|
||||
import Expand from './expand.md'
|
||||
import FixedColumnsHeader from './fixed-columns-header.md'
|
||||
import FixedColumns from './fixed-columns.md'
|
||||
import FixedHeader from './fixed-header.md'
|
||||
import GroupingColumns from './grouping-columns.md'
|
||||
import Head from './head.md'
|
||||
import NestedTable from './nested-table.md'
|
||||
import ResetFilter from './reset-filter.md'
|
||||
import RowSelectionAndOperation from './row-selection-and-operation.md'
|
||||
import RowSelectionCustom from './row-selection-custom.md'
|
||||
import RowSelection from './row-selection.md'
|
||||
import Size from './size.md'
|
||||
import Template from './template.md'
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
|
||||
const md = {
|
||||
cn: `# Table 表格
|
||||
|
||||
展示行列数据。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当有大量结构化的数据需要展现时；
|
||||
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
|
||||
|
||||
## 如何使用
|
||||
|
||||
指定表格的数据源 \`dataSource\` 为一个数组。
|
||||
## 代码演示`,
|
||||
us: `# Table
|
||||
|
||||
A table displays rows of data.
|
||||
|
||||
## When To Use
|
||||
|
||||
- To display a collection of structured data.
|
||||
- To sort, search, paginate, filter data.
|
||||
|
||||
## How To Use
|
||||
|
||||
Specify \`dataSource\` of Table as an array of data.
|
||||
## Examples
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
category: 'Components',
|
||||
cols: 1,
|
||||
type: 'Data Display',
|
||||
title: 'Table',
|
||||
subtitle: '表格',
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
<Ajax />
|
||||
<Basic />
|
||||
<Bordered />
|
||||
<ColspanRowspan />
|
||||
<CustomFilterPanel />
|
||||
<EditCell />
|
||||
<EditRow />
|
||||
<ExpandChildren />
|
||||
<Expand />
|
||||
<FixedColumnsHeader />
|
||||
<FixedColumns />
|
||||
<FixedHeader />
|
||||
<GroupingColumns />
|
||||
<Head />
|
||||
<NestedTable />
|
||||
<ResetFilter />
|
||||
<RowSelectionAndOperation />
|
||||
<RowSelectionCustom />
|
||||
<RowSelection />
|
||||
<Size />
|
||||
<Template />
|
||||
<api>
|
||||
<template slot='cn'>
|
||||
<CN/>
|
||||
</template>
|
||||
<US/>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
84
components/table/demo/row-selection-and-operation.md
Normal file
84
components/table/demo/row-selection-and-operation.md
Normal file
@ -0,0 +1,84 @@
|
||||
<cn>
|
||||
#### 选择和操作
|
||||
选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Selection and operation
|
||||
To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 16px">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="start"
|
||||
:disabled="!hasSelected"
|
||||
:loading="loading"
|
||||
>
|
||||
Reload
|
||||
</a-button>
|
||||
<span style="margin-left: 8px">
|
||||
<template v-if="hasSelected">
|
||||
{{`Selected ${selectedRowKeys.length} items`}}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :columns="columns" :dataSource="data" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
}];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 46; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: `Edward King ${i}`,
|
||||
age: 32,
|
||||
address: `London, Park Lane no. ${i}`,
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
selectedRowKeys: [], // Check here to configure the default column
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasSelected() {
|
||||
return this.selectedRowKeys.length > 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
start () {
|
||||
this.loading = true;
|
||||
// ajax request after empty completing
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.selectedRowKeys = [];
|
||||
}, 1000);
|
||||
},
|
||||
onSelectChange (selectedRowKeys) {
|
||||
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
97
components/table/demo/row-selection-custom.md
Normal file
97
components/table/demo/row-selection-custom.md
Normal file
@ -0,0 +1,97 @@
|
||||
<cn>
|
||||
#### 自定义选择项
|
||||
通过 `rowSelection.selections` 自定义选择项，默认不显示下拉选项，设为 `true` 时显示默认选择项。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Custom selection
|
||||
Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" />
|
||||
</template>
|
||||
<script>
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
}];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 46; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: `Edward King ${i}`,
|
||||
age: 32,
|
||||
address: `London, Park Lane no. ${i}`,
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
selectedRowKeys: [], // Check here to configure the default column
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rowSelection() {
|
||||
const { selectedRowKeys } = this;
|
||||
return {
|
||||
selectedRowKeys,
|
||||
onChange: this.onSelectChange,
|
||||
hideDefaultSelections: true,
|
||||
selections: [{
|
||||
key: 'all-data',
|
||||
text: 'Select All Data',
|
||||
onSelect: () => {
|
||||
this.selectedRowKeys = [...Array(46).keys()]; // 0...45
|
||||
},
|
||||
}, {
|
||||
key: 'odd',
|
||||
text: 'Select Odd Row',
|
||||
onSelect: (changableRowKeys) => {
|
||||
let newSelectedRowKeys = [];
|
||||
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
|
||||
if (index % 2 !== 0) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.selectedRowKeys = newSelectedRowKeys;
|
||||
},
|
||||
}, {
|
||||
key: 'even',
|
||||
text: 'Select Even Row',
|
||||
onSelect: (changableRowKeys) => {
|
||||
let newSelectedRowKeys = [];
|
||||
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
|
||||
if (index % 2 !== 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
this.selectedRowKeys = newSelectedRowKeys;
|
||||
},
|
||||
}],
|
||||
onSelection: this.onSelection,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSelectChange (selectedRowKeys) {
|
||||
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
78
components/table/demo/row-selection.md
Normal file
78
components/table/demo/row-selection.md
Normal file
@ -0,0 +1,78 @@
|
||||
<cn>
|
||||
#### 可选择
|
||||
第一列是联动的选择框。
|
||||
> 默认点击 checkbox 触发选择行为
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### selection
|
||||
Rows can be selectable by making first column as a selectable column.
|
||||
> selection happens when clicking checkbox defaultly.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data">
|
||||
<a slot="name" slot-scope="text" href="#">{{text}}</a>
|
||||
</a-table>
|
||||
</template>
|
||||
<script>
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
scopedSlots: { customRender: 'name' },
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
}];
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
}, {
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
}, {
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
}, {
|
||||
key: '4',
|
||||
name: 'Disabled User',
|
||||
age: 99,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
}];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rowSelection() {
|
||||
const { selectedRowKeys } = this;
|
||||
return {
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
getCheckboxProps: record => ({
|
||||
props: {
|
||||
disabled: record.name === 'Disabled User', // Column configuration not to be checked
|
||||
name: record.name,
|
||||
}
|
||||
}),
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
60
components/table/demo/size.md
Normal file
60
components/table/demo/size.md
Normal file
@ -0,0 +1,60 @@
|
||||
<cn>
|
||||
#### 紧凑型
|
||||
两种紧凑型的列表，小型列表只用于对话框内。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### size
|
||||
Two compacted table size: `middle` and `small`, `small` size is used in Modal only.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="components-table-demo-size">
|
||||
<h4>Middle size table</h4>
|
||||
<a-table :columns="columns" :dataSource="data" size="middle" />
|
||||
<h4>Small size table</h4>
|
||||
<a-table :columns="columns" :dataSource="data" size="small" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
}];
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
}, {
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
}, {
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
}];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#components-table-demo-size h4 { margin-bottom: 16px; }
|
||||
</style>
|
||||
```
|
||||
@ -1,20 +1,3 @@
|
||||
---
|
||||
category: Components
|
||||
cols: 1
|
||||
type: Data Display
|
||||
title: Table
|
||||
---
|
||||
|
||||
A table displays rows of data.
|
||||
|
||||
## When To Use
|
||||
|
||||
- To display a collection of structured data.
|
||||
- To sort, search, paginate, filter data.
|
||||
|
||||
## How To Use
|
||||
|
||||
Specify `dataSource` of Table as an array of data.
|
||||
|
||||
```jsx
|
||||
const dataSource = [{
|
||||
@ -160,47 +143,12 @@ Properties for row selection.
|
||||
| text | Display text of this selection | string\|React.ReactNode | - |
|
||||
| onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - |
|
||||
|
||||
## Using in TypeScript
|
||||
|
||||
```jsx
|
||||
import { Table } from 'antd';
|
||||
import { ColumnProps } from 'antd/lib/table';
|
||||
|
||||
interface IUser {
|
||||
key: number,
|
||||
name: string;
|
||||
}
|
||||
|
||||
const columns: ColumnProps<IUser>[] = [{
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
}];
|
||||
|
||||
const data: IUser[] = [{
|
||||
key: 0,
|
||||
name: 'Jack',
|
||||
}];
|
||||
|
||||
class UserTable extends Table<IUser> {}
|
||||
|
||||
<UserTable columns={columns} dataSource={data} />
|
||||
|
||||
// Use JSX style API
|
||||
class NameColumn extends Table.Column<IUser> {}
|
||||
|
||||
<UserTable dataSource={data}>
|
||||
<NameColumn key="name" title="Name" dataIndex="name" />
|
||||
</UserTable>
|
||||
```
|
||||
|
||||
## Note
|
||||
|
||||
According to [React documentation](https://facebook.github.io/react/docs/lists-and-keys.html#keys), every child in array should be assigned a unique key. The values inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value default for `dataSource`.
|
||||
The values inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value default for `dataSource`.
|
||||
|
||||
If `dataSource[i].key` is not provided, then you should specify the primary key of dataSource value via `rowKey`. If not, warnings like above will show in browser console.
|
||||
|
||||
|
||||
If `dataSource[i].key` is not provided, then you should specify the primary key of dataSource value via `rowKey`. If not, warnings will show in browser console.
|
||||
|
||||
```jsx
|
||||
// primary key is uid
|
||||
|
||||
@ -1,21 +1,3 @@
|
||||
---
|
||||
category: Components
|
||||
cols: 1
|
||||
type: Data Display
|
||||
title: Table
|
||||
subtitle: 表格
|
||||
---
|
||||
|
||||
展示行列数据。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当有大量结构化的数据需要展现时；
|
||||
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
|
||||
|
||||
## 如何使用
|
||||
|
||||
指定表格的数据源 `dataSource` 为一个数组。
|
||||
|
||||
```jsx
|
||||
const dataSource = [{
|
||||
@ -84,6 +66,7 @@ const columns = [{
|
||||
#### onRow 用法
|
||||
|
||||
适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
|
||||
遵循Vue [jsx语法](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
|
||||
|
||||
```jsx
|
||||
<Table
|
||||
@ -108,33 +91,33 @@ const columns = [{
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| className | 列的 className | string | - |
|
||||
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | |
|
||||
| dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | string | - |
|
||||
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode | - |
|
||||
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | VNode\|slot | - |
|
||||
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |
|
||||
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |
|
||||
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |
|
||||
| filterIcon | 自定义 fiter 图标。 | ReactNode | false |
|
||||
| filterIcon | 自定义 fiter 图标。 | VNode\|slot | false |
|
||||
| filterMultiple | 是否多选 | boolean | true |
|
||||
| filters | 表头的筛选菜单项 | object\[] | - |
|
||||
| fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
|
||||
| key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |
|
||||
| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
|
||||
| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格行/列合并,可参考demo 表格行/列合并 | Function(text, record, index) {} | - |
|
||||
| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - |
|
||||
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - |
|
||||
| title | 列头显示文字 | string\|ReactNode | - |
|
||||
| title | 列头显示文字 | string\|slot | - |
|
||||
| width | 列宽度 | string\|number | - |
|
||||
| onCell | 设置单元格属性 | Function(record) | - |
|
||||
| onFilter | 本地模式下，确定筛选的运行函数 | Function | - |
|
||||
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
|
||||
| onHeaderCell | 设置头部单元格属性 | Function(column) | - |
|
||||
| customHeaderCell | 设置头部单元格属性 | Function(column) | - |
|
||||
| onFilter | 本地模式下，确定筛选的运行函数, 使用template或jsx时作为`filter`事件使用 | Function | - |
|
||||
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用template或jsx时作为`filter`事件使用 | function(visible) {} | - |
|
||||
|
||||
|
||||
### ColumnGroup
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | 列头显示文字 | string\|ReactNode | - |
|
||||
| title | 列头显示文字 | string\|slot | - |
|
||||
|
||||
### rowSelection
|
||||
|
||||
@ -146,7 +129,7 @@ const columns = [{
|
||||
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
|
||||
| hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
|
||||
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] | \[] |
|
||||
| selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[]\|boolean | true |
|
||||
| selections | 自定义选择项, 设为 `true` 时使用默认选择项 | object\[]\|boolean | true |
|
||||
| type | 多选/单选，`checkbox` or `radio` | string | `checkbox` |
|
||||
| onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | - |
|
||||
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - |
|
||||
@ -157,50 +140,16 @@ const columns = [{
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| key | React 需要的 key，建议设置 | string | - |
|
||||
| text | 选择项显示的文字 | string\|React.ReactNode | - |
|
||||
| key | Vue 需要的 key，建议设置 | string | - |
|
||||
| text | 选择项显示的文字 | string\|VNode | - |
|
||||
| onSelect | 选择项点击回调 | Function(changeableRowKeys) | - |
|
||||
|
||||
## 在 TypeScript 中使用
|
||||
|
||||
```jsx
|
||||
import { Table } from 'antd';
|
||||
import { ColumnProps } from 'antd/lib/table';
|
||||
|
||||
interface IUser {
|
||||
key: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const columns: ColumnProps<IUser>[] = [{
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
}];
|
||||
|
||||
const data: IUser[] = [{
|
||||
key: 0,
|
||||
name: 'Jack',
|
||||
}];
|
||||
|
||||
class UserTable extends Table<IUser> {}
|
||||
<UserTable columns={columns} dataSource={data} />
|
||||
|
||||
// 使用 JSX 风格的 API
|
||||
class NameColumn extends Table.Column<IUser> {}
|
||||
|
||||
<UserTable dataSource={data}>
|
||||
<NameColumn key="name" title="Name" dataIndex="name" />
|
||||
</UserTable>
|
||||
```
|
||||
|
||||
## 注意
|
||||
|
||||
按照 [React 的规范](https://facebook.github.io/react/docs/lists-and-keys.html#keys)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
|
||||
在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
|
||||
|
||||
如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。
|
||||
|
||||
|
||||
如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现缺少key的提示，表格组件也会出现各类奇怪的错误。
|
||||
|
||||
```jsx
|
||||
// 比如你的数据主键是 uid
|
||||
|
||||
@ -60,8 +60,12 @@ export default {
|
||||
const columns = this.columns.map((col, index) => ({
|
||||
...col,
|
||||
customHeaderCell: (column) => ({
|
||||
props: {
|
||||
width: column.width,
|
||||
onResize: this.handleResize(index),
|
||||
},
|
||||
on: {
|
||||
resize: this.handleResize(index),
|
||||
},
|
||||
}),
|
||||
}))
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import * as AllDemo from '../demo'
|
||||
import Header from './header'
|
||||
import zhCN from 'antd/locale-provider/zh_CN'
|
||||
import enUS from 'antd/locale-provider/default'
|
||||
import _ from 'lodash'
|
||||
export default {
|
||||
render () {
|
||||
const { name } = this.$route.params
|
||||
@ -28,7 +29,7 @@ export default {
|
||||
const MenuGroup = []
|
||||
for (const [type, menus] of Object.entries(menuConfig)) {
|
||||
const MenuItems = []
|
||||
menus.forEach(({ title, subtitle }) => {
|
||||
_.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
|
||||
const linkValue = lang === 'cn'
|
||||
? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
|
||||
: [<span>{title}</span>]
|
||||
|
||||
@ -38,3 +38,4 @@ export { default as localeProvider } from 'antd/locale-provider/demo/index.vue'
|
||||
export { default as slider } from 'antd/slider/demo/index.vue'
|
||||
export { default as progress } from 'antd/progress/demo/index.vue'
|
||||
export { default as timeline } from 'antd/timeline/demo/index.vue'
|
||||
export { default as table } from 'antd/table/demo/index.vue'
|
||||
|
||||
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
||||
const hashs = window.location.hash.split('/')
|
||||
const d = hashs[hashs.length - 1]
|
||||
return {
|
||||
component: import(`../components/grid/demo/${d}`),
|
||||
component: import(`../components/table/demo/${d}`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user