merge
wangxueliang
commit
94e76c2226
|
|
@ -70,14 +70,16 @@ export default {
|
|||
getMenuElement () {
|
||||
const { onClick, prefixCls, $slots } = this
|
||||
this.childOriginEvents = getEvents($slots.overlay[0])
|
||||
return cloneElement($slots.overlay[0], {
|
||||
const extraOverlayProps = {
|
||||
props: {
|
||||
prefixCls: `${prefixCls}-menu`,
|
||||
getPopupContainer: () => this.getPopupDomNode(),
|
||||
},
|
||||
on: {
|
||||
click: onClick,
|
||||
},
|
||||
})
|
||||
}
|
||||
return cloneElement($slots.overlay[0], extraOverlayProps)
|
||||
},
|
||||
|
||||
getPopupDomNode () {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)) {
|
||||
|
|
@ -133,12 +133,12 @@ export default {
|
|||
const filteredValueColumns = this.getFilteredValueColumns(val)
|
||||
if (filteredValueColumns.length > 0) {
|
||||
const filtersFromColumns = this.getFiltersFromColumns(val)
|
||||
const newFilters = { ...this.state.filters }
|
||||
const newFilters = { ...this.sFilters }
|
||||
Object.keys(filtersFromColumns).forEach(key => {
|
||||
newFilters[key] = filtersFromColumns[key]
|
||||
})
|
||||
if (this.isFiltersChanged(newFilters)) {
|
||||
this.setState({ filters: newFilters })
|
||||
this.setState({ sFilters: newFilters })
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const columns = [{
|
|||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
width: '20%',
|
||||
slotScopeName: 'name',
|
||||
scopedSlots: { customRender: 'name' },
|
||||
}, {
|
||||
title: 'Gender',
|
||||
dataIndex: 'gender',
|
||||
|
|
|
|||
|
|
@ -11,15 +11,17 @@ Table with editable rows.
|
|||
```html
|
||||
<template>
|
||||
<a-table :columns="columns" :dataSource="data" bordered>
|
||||
<div v-for="col in ['name', 'age', 'address']" :key="col" :slot="col" slot-scope="text, record, index">
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>{{text}}</template>
|
||||
</div>
|
||||
<template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record, index">
|
||||
<div>
|
||||
<a-input
|
||||
v-if="record.editable"
|
||||
style="margin: -5px 0"
|
||||
:value="text"
|
||||
@change="e => handleChange(e.target.value, record.key, col)"
|
||||
/>
|
||||
<template v-else>{{text}}</template>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="operation" slot-scope="text, record, index">
|
||||
<div class='editable-row-operations'>
|
||||
<span v-if="record.editable">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<cn>
|
||||
#### 固定列
|
||||
对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
|
||||
> 若列头与内容不对齐或出现列重复，请指定列的宽度 `width`。
|
||||
> 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 `scroll.x`。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Fixed Columns
|
||||
To fix some columns and scroll inside other columns, and you must set `scoll.x` meanwhile.
|
||||
> Specify the width of columns if header and cell do not align properly.
|
||||
> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-table :columns="columns" :dataSource="data" :scroll="{ x: 1300 }">
|
||||
<a slot="action" slot-scope="text" href="#">action</a>
|
||||
</a-table>
|
||||
</template>
|
||||
<script>
|
||||
const columns = [
|
||||
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
|
||||
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
|
||||
{ title: 'Column 1', dataIndex: 'address', key: '1' },
|
||||
{ title: 'Column 2', dataIndex: 'address', key: '2' },
|
||||
{ title: 'Column 3', dataIndex: 'address', key: '3' },
|
||||
{ title: 'Column 4', dataIndex: 'address', key: '4' },
|
||||
{ title: 'Column 5', dataIndex: 'address', key: '5' },
|
||||
{ title: 'Column 6', dataIndex: 'address', key: '6' },
|
||||
{ title: 'Column 7', dataIndex: 'address', key: '7' },
|
||||
{ title: 'Column 8', dataIndex: 'address', key: '8' },
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'operation',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
];
|
||||
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York Park',
|
||||
}, {
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 40,
|
||||
address: 'London Park',
|
||||
}];
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<cn>
|
||||
#### 固定表头
|
||||
方便一页内展示大量数据。
|
||||
需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Fixed Header
|
||||
Display large amounts of data in scrollable view.
|
||||
> Specify the width of each column if header and cell do not align properly.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-table :columns="columns" :dataSource="data" :pagination="{ pageSize: 50 }" :scroll="{ y: 240 }" />
|
||||
</template>
|
||||
<script>
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
width: 150,
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
width: 150,
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
}];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: `Edward King ${i}`,
|
||||
age: 32,
|
||||
address: `London, Park Lane no. ${i}`,
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<cn>
|
||||
#### 表头分组
|
||||
`columns[n]` 可以内嵌 `children`，以渲染分组表头。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Grouping table head
|
||||
Group table head with `columns[n].children`.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:dataSource="data"
|
||||
bordered
|
||||
size="middle"
|
||||
:scroll="{ x: '130%', y: 240 }"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
filters: [{
|
||||
text: 'Joe',
|
||||
value: 'Joe',
|
||||
}, {
|
||||
text: 'John',
|
||||
value: 'John',
|
||||
}],
|
||||
onFilter: (value, record) => record.name.indexOf(value) === 0,
|
||||
}, {
|
||||
title: 'Other',
|
||||
children: [{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
width: 200,
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
}, {
|
||||
title: 'Address',
|
||||
children: [{
|
||||
title: 'Street',
|
||||
dataIndex: 'street',
|
||||
key: 'street',
|
||||
width: 200,
|
||||
}, {
|
||||
title: 'Block',
|
||||
children: [{
|
||||
title: 'Building',
|
||||
dataIndex: 'building',
|
||||
key: 'building',
|
||||
width: 100,
|
||||
}, {
|
||||
title: 'Door No.',
|
||||
dataIndex: 'number',
|
||||
key: 'number',
|
||||
width: 100,
|
||||
}],
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
title: 'Company',
|
||||
children: [{
|
||||
title: 'Company Address',
|
||||
dataIndex: 'companyAddress',
|
||||
key: 'companyAddress',
|
||||
}, {
|
||||
title: 'Company Name',
|
||||
dataIndex: 'companyName',
|
||||
key: 'companyName',
|
||||
}],
|
||||
}, {
|
||||
title: 'Gender',
|
||||
dataIndex: 'gender',
|
||||
key: 'gender',
|
||||
width: 60,
|
||||
fixed: 'right',
|
||||
}];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: 'John Brown',
|
||||
age: i + 1,
|
||||
street: 'Lake Park',
|
||||
building: 'C',
|
||||
number: 2035,
|
||||
companyAddress: 'Lake Street 42',
|
||||
companyName: 'SoftLake Co',
|
||||
gender: 'M',
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<cn>
|
||||
#### 筛选和排序
|
||||
对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。
|
||||
对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(a, b) { ... }`， a、b 为比较的两个列数据。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Filter and sorter
|
||||
Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.
|
||||
Use `sorter` to make a column sortable. `sorter` can be a function `function(a, b) { ... }` for sorting data locally.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-table :columns="columns" :dataSource="data" @change="onChange"/>
|
||||
</template>
|
||||
<script>
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
filters: [{
|
||||
text: 'Joe',
|
||||
value: 'Joe',
|
||||
}, {
|
||||
text: 'Jim',
|
||||
value: 'Jim',
|
||||
}, {
|
||||
text: 'Submenu',
|
||||
value: 'Submenu',
|
||||
children: [{
|
||||
text: 'Green',
|
||||
value: 'Green',
|
||||
}, {
|
||||
text: 'Black',
|
||||
value: 'Black',
|
||||
}],
|
||||
}],
|
||||
// specify the condition of filtering result
|
||||
// here is that finding the name started with `value`
|
||||
onFilter: (value, record) => record.name.indexOf(value) === 0,
|
||||
sorter: (a, b) => a.name.length - b.name.length,
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
filters: [{
|
||||
text: 'London',
|
||||
value: 'London',
|
||||
}, {
|
||||
text: 'New York',
|
||||
value: 'New York',
|
||||
}],
|
||||
filterMultiple: false,
|
||||
onFilter: (value, record) => record.address.indexOf(value) === 0,
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
}];
|
||||
|
||||
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: 'Jim Red',
|
||||
age: 32,
|
||||
address: 'London No. 2 Lake Park',
|
||||
}];
|
||||
|
||||
function onChange(pagination, filters, sorter) {
|
||||
console.log('params', pagination, filters, sorter);
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<cn>
|
||||
#### 嵌套子表格
|
||||
展示每行数据更详细的信息。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Nested tables
|
||||
Showing more detailed info of every row.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-table :columns="columns" :dataSource="data" class="components-table-demo-nested">
|
||||
<a slot="operation" slot-scope="text" href="#">Publish</a>
|
||||
<a-table
|
||||
slot="expandedRowRender"
|
||||
slot-scope="text"
|
||||
:columns="innerColumns"
|
||||
:dataSource="innerData"
|
||||
:pagination="false"
|
||||
>
|
||||
<span slot="status" slot-scope="text">
|
||||
<a-badge status="success" />Finished
|
||||
</span>
|
||||
<span slot="operation" slot-scope="text" class="table-operation">
|
||||
<a href="#">Pause</a>
|
||||
<a href="#">Stop</a>
|
||||
<a-dropdown>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
Action 1
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
Action 2
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a href="#">
|
||||
More <a-icon type="down" />
|
||||
</a>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</a-table>
|
||||
</a-table>
|
||||
</template>
|
||||
<script>
|
||||
const columns = [
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
|
||||
{ title: 'Version', dataIndex: 'version', key: 'version' },
|
||||
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
||||
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
|
||||
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
|
||||
{ title: 'Action', key: 'operation', scopedSlots: { customRender: 'operation' } },
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: 'Screem',
|
||||
platform: 'iOS',
|
||||
version: '10.3.4.5654',
|
||||
upgradeNum: 500,
|
||||
creator: 'Jack',
|
||||
createdAt: '2014-12-24 23:12:00',
|
||||
});
|
||||
}
|
||||
|
||||
const innerColumns = [
|
||||
{ title: 'Date', dataIndex: 'date', key: 'date' },
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Status', key: 'state', scopedSlots: { customRender: 'status' } },
|
||||
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
||||
{
|
||||
title: 'Action',
|
||||
dataIndex: 'operation',
|
||||
key: 'operation',
|
||||
scopedSlots: { customRender: 'operation' },
|
||||
},
|
||||
];
|
||||
|
||||
const innerData = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
innerData.push({
|
||||
key: i,
|
||||
date: '2014-12-24 23:12:00',
|
||||
name: 'This is production name',
|
||||
upgradeNum: 'Upgraded: 56',
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
columns,
|
||||
innerColumns,
|
||||
innerData,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child {
|
||||
padding: 0 48px 0 8px;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th {
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-row td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row .ant-table-row:last-child td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row .ant-table-thead > tr > th {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .table-operation a:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row:hover > td {
|
||||
background: #fbfbfb;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<cn>
|
||||
#### 可控的筛选和排序
|
||||
使用受控属性对筛选和排序状态进行控制。
|
||||
> 1. columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。
|
||||
> 2. 只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。
|
||||
> 3. 务必指定 `column.key`。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Reset filters and sorters
|
||||
Control filters and sorters by `filteredValue` and `sortOrder`.
|
||||
> 1. Defining `filteredValue` or `sortOrder` means that it is in the controlled mode.
|
||||
> 2. Make sure `sortOrder` is assigned for only one column.
|
||||
> 3. `column.key` is required.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<div class="table-operations">
|
||||
<a-button @click="setAgeSort">Sort age</a-button>
|
||||
<a-button @click="clearFilters">Clear filters</a-button>
|
||||
<a-button @click="clearAll">Clear filters and sorters</a-button>
|
||||
</div>
|
||||
<a-table :columns="columns" :dataSource="data" @change="handleChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
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: 'Jim Red',
|
||||
age: 32,
|
||||
address: 'London No. 2 Lake Park',
|
||||
}];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data,
|
||||
filteredInfo: null,
|
||||
sortedInfo: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
let { sortedInfo, filteredInfo } = this;
|
||||
sortedInfo = sortedInfo || {};
|
||||
filteredInfo = filteredInfo || {};
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
filters: [
|
||||
{ text: 'Joe', value: 'Joe' },
|
||||
{ text: 'Jim', value: 'Jim' },
|
||||
],
|
||||
filteredValue: filteredInfo.name || null,
|
||||
onFilter: (value, record) => record.name.includes(value),
|
||||
sorter: (a, b) => a.name.length - b.name.length,
|
||||
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
filters: [
|
||||
{ text: 'London', value: 'London' },
|
||||
{ text: 'New York', value: 'New York' },
|
||||
],
|
||||
filteredValue: filteredInfo.address || null,
|
||||
onFilter: (value, record) => record.address.includes(value),
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
|
||||
}];
|
||||
return columns;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (pagination, filters, sorter) {
|
||||
console.log('Various parameters', pagination, filters, sorter);
|
||||
this.filteredInfo = filters;
|
||||
this.sortedInfo = sorter;
|
||||
},
|
||||
clearFilters () {
|
||||
this.filteredInfo = null;
|
||||
},
|
||||
clearAll () {
|
||||
this.filteredInfo = null;
|
||||
this.sortedInfo = null;
|
||||
},
|
||||
setAgeSort () {
|
||||
this.sortedInfo = {
|
||||
order: 'descend',
|
||||
columnKey: 'age',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.table-operations {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-operations > button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -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>
|
||||
```
|
||||
|
|
@ -193,6 +193,7 @@ export default {
|
|||
onSelect={this.setSelectedKeys}
|
||||
onDeselect={this.setSelectedKeys}
|
||||
selectedKeys={this.sSelectedKeys}
|
||||
getPopupContainer={(triggerNode) => triggerNode.parentNode}
|
||||
>
|
||||
{this.renderMenus(column.filters)}
|
||||
</Menu>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { getOptionProps, initDefaultProps, getComponentFromProp } from '../_util
|
|||
|
||||
export const TimeLineItemProps = {
|
||||
prefixCls: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
dot: PropTypes.any,
|
||||
pending: PropTypes.bool,
|
||||
|
|
@ -20,7 +19,7 @@ export default {
|
|||
pending: false,
|
||||
}),
|
||||
render () {
|
||||
const { prefixCls, color = '', last, pending, ...restProps } = getOptionProps(this)
|
||||
const { prefixCls, color = '', last, pending } = getOptionProps(this)
|
||||
const dot = getComponentFromProp(this, 'dot')
|
||||
const itemClassName = classNames({
|
||||
[`${prefixCls}-item`]: true,
|
||||
|
|
@ -33,9 +32,12 @@ export default {
|
|||
[`${prefixCls}-item-head-custom`]: dot,
|
||||
[`${prefixCls}-item-head-${color}`]: true,
|
||||
})
|
||||
|
||||
const liProps = {
|
||||
class: itemClassName,
|
||||
on: this.$listeners,
|
||||
}
|
||||
return (
|
||||
<li {...restProps} class={itemClassName}>
|
||||
<li {...liProps}>
|
||||
<div class={`${prefixCls}-item-tail`} />
|
||||
<div
|
||||
class={dotClassName}
|
||||
|
|
|
|||
|
|
@ -435,7 +435,7 @@ export default {
|
|||
// const children = this.renderChildren(this.$slots.default)
|
||||
|
||||
const getPopupContainer = this.isRootMenu
|
||||
? this.getPopupContainer : triggerNode => triggerNode.parentNode
|
||||
? this.parentMenuContext.getPopupContainer : triggerNode => triggerNode.parentNode
|
||||
const popupPlacement = popupPlacementMap[props.mode]
|
||||
const popupClassName = props.mode === 'inline' ? '' : props.popupClassName
|
||||
const liProps = {
|
||||
|
|
|
|||
|
|
@ -60,8 +60,12 @@ export default {
|
|||
const columns = this.columns.map((col, index) => ({
|
||||
...col,
|
||||
customHeaderCell: (column) => ({
|
||||
width: column.width,
|
||||
onResize: this.handleResize(index),
|
||||
props: {
|
||||
width: column.width,
|
||||
},
|
||||
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,11 @@ const AsyncComp = () => {
|
|||
const hashs = window.location.hash.split('/')
|
||||
const d = hashs[hashs.length - 1]
|
||||
return {
|
||||
<<<<<<< HEAD
|
||||
component: import(`../components/vc-m-feedback/demo/${d}`),
|
||||
=======
|
||||
component: import(`../components/table/demo/${d}`),
|
||||
>>>>>>> 5d2271a131c74d672cc0cfada07e256752160b41
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
|
|
|||
Loading…
Reference in New Issue