test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 20:18:22 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

add table demo

Browse Source
This commit is contained in:
tjz 2018-04-03 22:18:18 +08:00
parent 714f15ff7e
commit 5d2271a131
13 changed files with 445 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/table/Table.jsx
View File

@ -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
)) {

2
components/table/demo/ajax.md
View File

@ -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
View 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
View 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
View 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
View 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
View 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>
```

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

@ -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.
![](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png)
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

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

@ -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` 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。
![](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png)
如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现缺少key的提示，表格组件也会出现各类奇怪的错误。
```jsx
// 比如你的数据主键是 uid

8
components/vc-table/demo/column-resize.js
View File

@ -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
examples/components/demo.vue
View File

@ -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>]

1
examples/demo.js
View File

@ -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'

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/grid/demo/${d}`),
component: import(`../components/table/demo/${d}`),
}
}
export default [