github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update table doc

pull/9/head
tangjinzhou 2018-04-04 10:29:42 +08:00
parent 5d2271a131
commit 5169b62458
8 changed files with 121 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
components/table/index.en-US.md
View File

@ -36,48 +36,60 @@ const columns = [{
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| bordered | Whether to show all table borders | boolean | `false` |
| columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - |
| columns | Columns of table | array | - |
| components | Override default table elements | object | - |
| dataSource | Data record array to be displayed | any\[] | - |
| defaultExpandAllRows | Expand all rows initially | boolean | `false` |
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
| expandedRowKeys | Current expanded row keys | string\[] | - |
| expandedRowRender | Expanded container render for each row | Function(record):ReactNode | - |
| expandedRowRender | Expanded container render for each row | Function(record):VNode\|slot-scope | - |
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` |
| footer | Table footer renderer | Function(currentPageData) | |
| footer | Table footer renderer | Function(currentPageData)\|slot-scope | |
| indentSize | Indent size in pixels of tree data | number | 15 |
| loading | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` |
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| pagination | Pagination [config](/components/pagination/), hide it by setting it to `false` | object | |
| loading | Loading status of table | boolean\|[object](https://vuecomponent.github.io/ant-design/#/us/components/spin) | `false` |
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' |
| pagination | Pagination [config](https://vuecomponent.github.io/ant-design/#/us/components/pagination), hide it by setting it to `false` | object | |
| rowClassName | Row's className | Function(record, index):string | - |
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
| rowSelection | Row selection [config](#rowSelection) | object | null |
| scroll | Whether table can be scrolled in x/y direction, `x` or `y` can be a number that indicates the width and height of table body | object | - |
| showHeader | Whether to show table header | boolean | `true` |
| size | Size of table | `default` \| `middle` \| `small` | `default` |
| title | Table title renderer | Function(currentPageData) | |
| onChange | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter) | |
| onExpand | Callback executed when the row expand icon is clicked | Function(expanded, record) | |
| onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | |
| onHeaderRow | Set props on per header row | Function(column, index) | - |
| onRow | Set props on per row | Function(record, index) | - |
| title | Table title renderer | Function(currentPageData)\|slot-scope | |
| customHeaderRow | Set props on per header row | Function(column, index) | - |
| customRow | Set props on per row | Function(record, index) | - |
#### onRow usage
### Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| change | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter) | |
| expand | Callback executed when the row expand icon is clicked | Function(expanded, record) | |
| expandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | |
Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
#### customRow usage
Same as `customRow` `customHeaderRow` `customCell` `customHeaderCell`.
Follow [Vue jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) syntax。
```jsx
<Table
onRow={(record) => {
customRow={(record) => {
return {
onClick: () => {}, // click row
onMouseEnter: () => {}, // mouse enter row
onXxxx...
props: {
xxx...
},
on: {
click: () => {}, // click row
mouseenter: () => {}, // mouse enter row
xxxx...
},
};
)}
onHeaderRow={(column) => {
customHeaderRow={(column) => {
return {
onClick: () => {}, // click header row
on: {
click: () => {}, // click header row
},
};
)}
/>
@ -93,30 +105,34 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| colSpan | Span of this column's title | number | |
| dataIndex | Display field of the data record, could be set like `a.b.c` | string | - |
| defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - |
| filterDropdown | Customized filter overlay | ReactNode | - |
| filterDropdown | Customized filter overlay | slot | - |
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |
| filtered | Whether the `dataSource` is filtered | boolean | `false` |
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |
| filterIcon | Customized filter icon | ReactNode | `false` |
| filterIcon | Customized filter icon | slot | `false` |
| filterMultiple | Whether multiple filters can be selected | boolean | `true` |
| filters | Filter menu config | object\[] | - |
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
| customRender | Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config | Function(text, record, index) {}\|slot-scope | - |
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
| title | Title of this column | string\|ReactNode | - |
| title | Title of this column | string\|slot | - |
| width | Width of this column | string\|number | - |
| onCell | Set props on per cell | Function(record) | - |
| onFilter | Callback executed when the confirm filter button is clicked | Function | - |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |
| onHeaderCell | Set props on per header cell | Function(column) | - |
| customCell | Set props on per cell | Function(record) | - |
| customHeaderCell | Set props on per header cell | Function(column) | - |
| onFilter | Callback executed when the confirm filter button is clicked, Use as a `filter` event when using template or jsx | Function | - |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisible` event when using template or jsx | function(visible) {} | - |
| slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { filterIcon: 'XXX'}` | object | - |
| scopedSlots | When using columns, you can use this property to configure the properties that support the slot-scope, such as `scopedSlots: { customRender: 'XXX'}` | object | - |
### ColumnGroup
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| title | Title of the column group | string\|ReactNode | - |
| title | Title of the column group | string\|slot | - |
| slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { title: 'XXX'}` | object | - |
### rowSelection
@ -140,7 +156,7 @@ Properties for row selection.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| key | Unique key of this selection | string | - |
| text | Display text of this selection | string\|React.ReactNode | - |
| text | Display text of this selection | string\|VNode | - |
| onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - |

67
components/table/index.zh-CN.md
View File

@ -35,51 +35,64 @@ const columns = [{
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 列的 className | string | - |
| bordered | 是否展示外边框和列边框 | boolean | false |
| columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - |
| columns | 表格列的配置描述，具体项见下表 | array | - |
| components | 覆盖默认的 table 元素 | object | - |
| dataSource | 数据数组 | any\[] | |
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false |
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - |
| expandedRowKeys | 展开的行，控制属性 | string\[] | - |
| expandedRowRender | 额外的展开行 | Function(record):ReactNode | - |
| expandedRowRender | 额外的展开行 | Function(record):VNode\|slot-scope| - |
| expandRowByClick | 通过点击行来展开子行 | boolean | `false` |
| footer | 表格尾部 | Function(currentPageData) | |
| footer | 表格尾部 | Function(currentPageData)\|slot-scope | |
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |
| loading | 页面是否加载中 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' <br> [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| pagination | 分页器，配置项参考 [pagination](/components/pagination/)，设为 false 时不展示和进行分页 | object | |
| loading | 页面是否加载中 | boolean\|[object](https://vuecomponent.github.io/ant-design/#/cn/components/spin) | false |
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' |
| pagination | 分页器，配置项参考 [pagination](https://vuecomponent.github.io/ant-design/#/cn/components/pagination)，设为 false 时不展示和进行分页 | object | |
| rowClassName | 表格行的类名 | Function(record, index):string | - |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string\|Function(record):string | 'key' |
| rowSelection | 列表项是否可选择，[配置项](#rowSelection) | object | null |
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | object | - |
| showHeader | 是否显示表头 | boolean | true |
| size | 正常或迷你类型，`default` or `small` | string | default |
| title | 表格标题 | Function(currentPageData) | |
| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | |
| onExpand | 点击展开图标时触发 | Function(expanded, record) | |
| onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | |
| onHeaderRow | 设置头部行属性 | Function(column, index) | - |
| onRow | 设置行属性 | Function(record, index) | - |
| title | 表格标题 | Function(currentPageData)\|slot-scope | |
| customHeaderRow | 设置头部行属性 | Function(column, index) | - |
| customRow | 设置行属性 | Function(record, index) | - |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| expandedRowsChange | 展开的行变化时触发 | Function(expandedRows) |
| change | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) |
| expand | 点击展开图标时触发 | Function(expanded, record) |
#### onRow 用法
#### customRow 用法
适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
遵循Vue [jsx语法](https://github.com/vuejs/babel-plugin-transform-vue-jsx)
适用于 `customRow` `customHeaderRow` `customCell` `customHeaderCell`。
遵循[Vue jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)语法。
```jsx
<Table
onRow={(record) => {
customRow={(record) => {
return {
onClick: () => {}, // 点击行
onMouseEnter: () => {}, // 鼠标移入行
onXxxx...
props: {
xxx... //属性
},
on: { // 事件
click: () => {}, // 点击行
mouseenter: () => {}, // 鼠标移入行
xxxx...
},
};
)}
onHeaderRow={(column) => {
customHeaderRow={(column) => {
return {
onClick: () => {}, // 点击表头行
on: {
click: () => {}, // 点击表头行
}
};
)}
/>
@ -101,23 +114,25 @@ const columns = [{
| filterMultiple | 是否多选 | boolean | true |
| filters | 表头的筛选菜单项 | object\[] | - |
| fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
| key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |
| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格行/列合并,可参考demo 表格行/列合并 | Function(text, record, index) {} | - |
| key | Vue 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |
| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格行/列合并,可参考demo 表格行/列合并 | Function(text, record, index) {}\|slot-scope | - |
| 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\|slot | - |
| width | 列宽度 | string\|number | - |
| onCell | 设置单元格属性 | Function(record) | - |
| customCell | 设置单元格属性 | Function(record) | - |
| customHeaderCell | 设置头部单元格属性 | Function(column) | - |
| onFilter | 本地模式下，确定筛选的运行函数, 使用template或jsx时作为`filter`事件使用 | Function | - |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用template或jsx时作为`filter`事件使用 | function(visible) {} | - |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用template或jsx时作为`filterDropdownVisibleChange`事件使用 | function(visible) {} | - |
| slots | 使用columns时，可以通过该属性配置支持slot的属性，如 `slots: { filterIcon: 'XXX'}` | object | - |
| scopedSlots | 使用columns时，可以通过该属性配置支持slot-scope的属性，如 `scopedSlots: { customRender: 'XXX'}` | object | - |
### ColumnGroup
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 列头显示文字 | string\|slot | - |
| slots | 使用columns时，可以通过该属性配置支持slot的属性，如 `slots: { title: 'XXX'}` | object | - |
### rowSelection

2
components/table/interface.js
View File

@ -18,6 +18,8 @@ export const ColumnProps = {
// key?: React.Key;
dataIndex: PropTypes.string,
customRender: PropTypes.func,
customCell: PropTypes.func,
customHeaderCell: PropTypes.func,
filters: PropTypes.arrayOf(ColumnFilterItem),
// onFilter: (value: any, record: T) => PropTypes.bool,
filterMultiple: PropTypes.bool,

53
components/vc-table/demo/rowAndCellClick.js
View File

@ -14,33 +14,6 @@ const onRowDoubleClick = (record, index, e) => {
console.log(`Double click nth(${index}) row of parent, record.name: ${record.name}`, e)
}
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 400,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 100,
render: (h, text) => (
<span>{text} (Trigger Cell Click)</span>
),
onCell: (record) => ({
on: {
click (e) {
console.log('Click cell', record, e.target)
},
},
}),
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
width: 200,
}]
const data = [{
key: 1,
name: 'a',
@ -94,6 +67,32 @@ const data = [{
export default {
render () {
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 400,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 100,
customRender: (text) => (
<span>{text} (Trigger Cell Click)</span>
),
customCell: (record) => ({
on: {
click (e) {
console.log('Click cell', record, e.target)
},
},
}),
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
width: 200,
}]
return (
<Table
columns={columns}

2
components/vc-table/src/Column.jsx
View File

@ -18,7 +18,7 @@ export default {
customRender: PropTypes.func,
className: PropTypes.string,
// onCellClick: PropTypes.func,
// onCell: PropTypes.func,
customCell: PropTypes.func,
customHeaderCell: PropTypes.func,
},
}

6
components/vc-table/src/TableCell.jsx
View File

@ -74,9 +74,9 @@ export default {
}
}
if (column.onCell) {
tdProps = mergeProps(tdProps, column.onCell(record))
// tdProps.attrs = { ...tdProps.attrs, ...column.onCell(record) }
if (column.customCell) {
tdProps = mergeProps(tdProps, column.customCell(record))
// tdProps.attrs = { ...tdProps.attrs, ...column.customCell(record) }
}
// Fix https://github.com/ant-design/ant-design/issues/1202

2
components/vc-table/src/TableRow.jsx
View File

@ -204,7 +204,7 @@ const TableRow = {
warningOnce(
column.onCellClick === undefined,
'column[onCellClick] is deprecated, please use column[onCell] instead.',
'column[onCellClick] is deprecated, please use column[customCell] instead.',
)
cells.push(

2
examples/routes.js
View File

@ -3,7 +3,7 @@ const AsyncComp = () => {
const hashs = window.location.hash.split('/')
const d = hashs[hashs.length - 1]
return {
component: import(`../components/table/demo/${d}`),
component: import(`../components/vc-table/demo/${d}`),
}
}
export default [