6.2 高级表格
表单注册
一.头部固定
头部固定,内容 y轴 滚动
scroll
:指定y轴滚动 (240px)
width
:指定每列的宽度
const columns = [
{
title: 'id',
key: 'id',
width: 80,
dataIndex: 'id'
},
.....
<Card title="头部固定">
<Table
bordered
columns={columns}
dataSource={this.state.dataSource}
pagination={false}
+ scroll={{y: 240}}
/>
</Card>
//src/pages/table/highTable.js
import React from 'react';
import {Card, Table, Modal, Button, message} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils'
export default class HighTable extends React.Component {
state = {}
params = {
page: 1
}
componentDidMount() {
this.request();
}
request = () => {
axios.ajax({
url: '/table/list1',
data: {
params: {
page: this.params.page
},
// // 增加下方代码,则不会Loading
// isShowLoading:false
}
}).then((res) => {
if (res.code == 0) {
res.result.list.map((item, index) => {
item.key = index
});
this.setState({//页面刷新,不保留选中字段
dataSource: res.result.list,
});
}
})
};
render() {
const columns1 = [
{
title: 'id',
key: 'id',
width: 80,
dataIndex: 'id'
},
{
title: '用户名',
key: 'userName',
width: 80,
dataIndex: 'userName'
},
{
title: '性别',
key: 'sex',
width: 80,
dataIndex: 'sex',
render(sex) {
return sex == 1 ? '男' : '女'
}
},
{
title: '状态',
width: 80,
dataIndex: 'state',
render(state) {
let config = {
'1': '咸?一条',
'2': '风华浪子',
'3': '北大才子一枚',
'4': '百度FE',
'5': '创业者',
};
return config[state];
}
},
{
title: '爱好',
key: 'interest',
width: 80,
dataIndex: 'interest',
render(abc) {
let config = {
'1': '?',
'2': '?',
'3': '⚽',
'4': '?',
'5': '?',
'6': '?',
'7': '?',
'8': '?',
};
return config[abc];
}
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '地址',
key: 'address',
width: 120,
dataIndex: 'address'
},
{
title: '早起时间',
key: 'time',
width: 120,
dataIndex: 'time'
}
];
return (
<div>
<Card title="头部固定" style={{margin: '10px 0'}}>
<Table
bordered
columns={columns1}
dataSource={this.state.dataSource}
pagination={false}
scroll={{y: 240}}
/>
</Card>
</div>
);
}
}
二 左侧固定
左侧 y 轴固定,x轴滚动
此处scroll={{x: 1850}} 1850 = 略大于 width 宽度之和(通常是5-10px)
当
cocolumns2
中内容很多,会出现水平滚动条
-
fixed:'left'
:在这里固定了 ,第一/二 列在左侧 -
fixed:'right':固定后两列在右侧
-
fixed 列是否固定,可选 true
(等效于 left)'left'``'right'
boolean|string false -
... const columns2 = [ { title: 'id', key: 'id', width: 80, + fixed: 'left', dataIndex: 'id' }, { title: '用户名', key: 'userName', + fixed: 'left', width: 80, dataIndex: 'userName' }, { title: '性别', key: 'sex', width: 80, dataIndex: 'sex', render(sex) { return sex == 1 ? '男' : '女' } }, { title: '状态', width: 80, dataIndex: 'state', render(state) { let config = { '1': '咸?一条', '2': '风华浪子', '3': '北大才子一枚', '4': '百度FE', '5': '创业者', }; return config[state]; } }, { title: '爱好', key: 'interest', width: 80, dataIndex: 'interest', render(abc) { let config = { '1': '?', '2': '?', '3': '⚽', '4': '?', '5': '?', '6': '?', '7': '?', '8': '?', }; return config[abc]; } }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '地址', key: 'address', width: 120, + fixed:'right', dataIndex: 'address' }, { title: '早起时间', key: 'time', width: 120, + fixed:'right', dataIndex: 'time' } ]; ...
-
//src/pages/table/highTable.js import React from 'react'; import {Card, Table, Modal, Button, message} from 'antd'; import axios from './../../axios/index'; import Utils from './../../utils/utils' export default class HighTable extends React.Component { state = {}; params = { page: 1 }; componentDidMount() { this.request(); } // 动态获取mock数据 request = () => { axios.ajax({ url: '/table/list1', data: { params: { page: this.params.page }, // // 增加下方代码,则不会Loading // isShowLoading:false } }).then((res) => { if (res.code == 0) { res.result.list.map((item, index) => { item.key = index }); this.setState({//页面刷新,不保留选中字段 dataSource: res.result.list, }); } }) }; render() { const columns2 = [ { title: 'id', key: 'id', width: 80, fixed: 'left', dataIndex: 'id' }, { title: '用户名', key: 'userName', fixed: 'left', width: 80, dataIndex: 'userName' }, { title: '性别', key: 'sex', width: 80, dataIndex: 'sex', render(sex) { return sex == 1 ? '男' : '女' } }, { title: '状态', width: 80, dataIndex: 'state', render(state) { let config = { '1': '咸?一条', '2': '风华浪子', '3': '北大才子一枚', '4': '百度FE', '5': '创业者', }; return config[state]; } }, { title: '爱好', key: 'interest', width: 80, dataIndex: 'interest', render(abc) { let config = { '1': '?', '2': '?', '3': '⚽', '4': '?', '5': '?', '6': '?', '7': '?', '8': '?', }; return config[abc]; } }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '生日', key: 'birthday', width: 120, dataIndex: 'birthday' }, { title: '地址', key: 'address', width: 120, fixed:'right', dataIndex: 'address' }, { title: '早起时间', key: 'time', width: 120, fixed:'right', dataIndex: 'time' } ]; return ( <div> <Card title="左侧固定" style={{margin: '10px 0'}}> <Table bordered columns={columns2} dataSource={this.state.dataSource} pagination={false} scroll={{x: 1850}} /> </Card> </div> ); } }
三 排序
实现
年龄
这一列的排序?sort()?--------参考官网https://ant.design/components/table-cn/
handleChange = (pagination, filters, sorter) => { console.log('sorter: ', sorter.order); this.setState({ sortOrder: sorter.order, }); } const columns3 = [ ... { title: '年龄', key: 'age', dataIndex: 'age', sorter: (a, b) => a.age - b.age, sortOrder: this.state.sortOrder, }, ... ]; return ( <div> <Card title="表格排序" style={{margin: '10px 0'}}> <Table bordered columns={columns3} dataSource={this.state.dataSource} pagination={false} onChange={this.handleChange} /> </Card> </div> ); } }
//src/pages/table/highTable.js import React from 'react'; import {Card, Table, Modal, Button, message} from 'antd'; import axios from './../../axios/index'; import Utils from './../../utils/utils' export default class HighTable extends React.Component { state = {}; params = { page: 1 }; componentDidMount() { this.request(); } // 动态获取mock数据 request = () => { axios.ajax({ url: '/table/high/list', data: { params: { page: this.params.page }, // // 增加下方代码,则不会Loading // isShowLoading:false } }).then((res) => { if (res.code == 0) { res.result.list.map((item, index) => { item.key = index }); this.setState({//页面刷新,不保留选中字段 dataSource: res.result.list, }); } }) }; handleChange = (pagination, filters, sorter) => { console.log('sorter: ', sorter.order); this.setState({ sortOrder: sorter.order, }); } render() { const columns3 = [ { title: 'id', key: 'id', dataIndex: 'id' }, { title: '用户名', key: 'userName', dataIndex: 'userName' }, { title: '性别', key: 'sex', dataIndex: 'sex', render(sex) { return sex == 1 ? '男' : '女' } }, { title: '年龄', key: 'age', dataIndex: 'age', sorter: (a, b) => a.age - b.age, sortOrder: this.state.sortOrder, }, { title: '状态', dataIndex: 'state', render(state) { let config = { '1': '咸?一条', '2': '风华浪子', '3': '北大才子一枚', '4': '百度FE', '5': '创业者', }; return config[state]; } }, { title: '爱好', key: 'interest', dataIndex: 'interest', render(abc) { let config = { '1': '?', '2': '?', '3': '⚽', '4': '?', '5': '?', '6': '?', '7': '?', '8': '?', }; return config[abc]; } }, { title: '生日', key: 'birthday', dataIndex: 'birthday' }, { title: '地址', key: 'address', dataIndex: 'address' }, { title: '早起时间', key: 'time', dataIndex: 'time' } ]; return ( <div> <Card title="表格排序" style={{margin: '10px 0'}}> <Table bordered columns={columns3} dataSource={this.state.dataSource} pagination={false} onChange={this.handleChange} /> </Card> </div> ); } }
API
sorter 排序函数,本地排序使用一个函数(参考 Array.sort的 compareFunction),需要服务端排序可设为 true Function|boolean - sortOrder 排序的受控属性,外界可用此控制列的排序,可设置为 'ascend'
'descend'
false
boolean|string - onChange 分页、排序、筛选变化时触发 Function(pagination, filters, sorter, extra: { currentDataSource: [] })
四 操作按钮
在表格中添加(Badge)徽标
用于表示状态的小圆点
status
:状态点的颜色
text
:徽标的文本
<Badge status="success" text="Success" />
增加删除按钮?
替换表格字段(*使用 render返回 a 标签)
//删除操作 handleDelete = (item) => { let id = item.id; Modal.confirm({ title: "确认", content: '您确认要删除第'+id+'条数据吗', onOk: () => { message.success('删除成功'); this.request(); } }) } render(){ const columns4 = [ ... { title: '操作', width: 120, render: (text, item) => {//text 文本,item 这一行数据 return <Button size="small" onClick={() => { this.handleDelete(item) }}>删除</Button> } } ]; return( <Card title="表格操作" style={{margin: '10px 0'}}> <Table bordered columns={columns4} dataSource={this.state.dataSource} pagination={false} /> </Card> ) }
//src/pages/table/highTable.js import React from 'react'; import {Card, Table, Modal, Button, message, Badge} from 'antd'; import axios from './../../axios/index'; import Utils from './../../utils/utils' export default class HighTable extends React.Component { state = {}; params = { page: 1 }; componentDidMount() { this.request(); } // 动态获取mock数据 request = () => { axios.ajax({ url: '/table/high/list', data: { params: { page: this.params.page }, // // 增加下方代码,则不会Loading // isShowLoading:false } }).then((res) => { if (res.code == 0) { res.result.list.map((item, index) => { item.key = index }); this.setState({//页面刷新,不保留选中字段 dataSource: res.result.list, }); } }) }; //删除操作 handleDelete = (item) => { let id = item.id; Modal.confirm({ title: "确认", content: '您确认要删除第'+id+'条数据吗', onOk: () => { message.success('删除成功'); this.request(); } }) } render() { const columns4 = [ { title: 'id', width: 80, dataIndex: 'id' }, { title: '用户名', width: 80, dataIndex: 'userName' }, { title: '性别', width: 80, dataIndex: 'sex', render(sex) { return sex == 1 ? '男' : '女' } }, { title: '状态', width: 80, dataIndex: 'state', render(state) { let config = { '1': "咸?一条", '2': '风华浪子', '3': '北大才子一枚', '4': '百度FE', '5': '创业者', }; return config[state]; } }, { title: '爱好', width: 80, dataIndex: 'interest', render(abc) { let config = { '1': <Badge status="success" text='?'/>, '2': <Badge status="error" text='?'/>, '3': <Badge status="default" text='⚽'/>, '4': <Badge status="warning" text='?'/>, '5': <Badge status="processing" text='?'/>, '6': <Badge status="success" text='?'/>, '7': <Badge status="error" text='?'/>, '8': <Badge status="default" text='?'/>, }; return config[abc]; } }, { title: '生日', width: 120, dataIndex: 'birthday' }, { title: '地址', width: 120, dataIndex: 'address' }, { title: '操作', width: 120, render: (text, item) => { return <Button size="small" onClick={() => { this.handleDelete(item) }}>删除</Button> } } ]; return ( <div> <Card title="表格操作" style={{margin: '10px 0'}}> <Table bordered columns={columns4} dataSource={this.state.dataSource} pagination={false} /> </Card> </div> ); } }
完整案例
//src/pages/table/highTable.js
import React from 'react';
import {Card, Table, Modal, Button, message, Badge} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils'
export default class HighTable extends React.Component {
state = {};
params = {
page: 1
};
componentDidMount() {
this.request();
}
// 动态获取mock数据
request = () => {
axios.ajax({
url: '/table/high/list',
data: {
params: {
page: this.params.page
},
// // 增加下方代码,则不会Loading
// isShowLoading:false
}
}).then((res) => {
if (res.code == 0) {
res.result.list.map((item, index) => {
item.key = index
});
this.setState({//页面刷新,不保留选中字段
dataSource: res.result.list,
});
}
})
};
handleChange = (pagination, filters, sorter) => {
console.log('sorter: ', sorter.order);
this.setState({
sortOrder: sorter.order,
});
}
//删除操作
handleDelete = (item) => {
let id = item.id;
Modal.confirm({
title: "确认",
content: '您确认要删除第'+id+'条数据吗',
onOk: () => {
message.success('删除成功');
this.request();
}
})
}
render() {
const columns1 = [
{
title: 'id',
key: 'id',
width: 80,
dataIndex: 'id'
},
{
title: '用户名',
key: 'userName',
width: 80,
dataIndex: 'userName'
},
{
title: '性别',
key: 'sex',
width: 80,
dataIndex: 'sex',
render(sex) {
return sex == 1 ? '男' : '女'
}
},
{
title: '状态',
width: 80,
dataIndex: 'state',
render(state) {
let config = {
'1': '咸?一条',
'2': '风华浪子',
'3': '北大才子一枚',
'4': '百度FE',
'5': '创业者',
};
return config[state];
}
},
{
title: '爱好',
key: 'interest',
width: 80,
dataIndex: 'interest',
render(abc) {
let config = {
'1': '?',
'2': '?',
'3': '⚽',
'4': '?',
'5': '?',
'6': '?',
'7': '?',
'8': '?',
};
return config[abc];
}
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '地址',
key: 'address',
width: 120,
dataIndex: 'address'
},
{
title: '早起时间',
key: 'time',
width: 120,
dataIndex: 'time'
}
];
const columns2 = [
{
title: 'id',
key: 'id',
width: 80,
fixed: 'left',
dataIndex: 'id'
},
{
title: '用户名',
key: 'userName',
fixed: 'left',
width: 80,
dataIndex: 'userName'
},
{
title: '性别',
key: 'sex',
width: 80,
dataIndex: 'sex',
render(sex) {
return sex == 1 ? '男' : '女'
}
},
{
title: '状态',
width: 80,
dataIndex: 'state',
render(state) {
let config = {
'1': '咸?一条',
'2': '风华浪子',
'3': '北大才子一枚',
'4': '百度FE',
'5': '创业者',
};
return config[state];
}
},
{
title: '爱好',
key: 'interest',
width: 80,
dataIndex: 'interest',
render(abc) {
let config = {
'1': '?',
'2': '?',
'3': '⚽',
'4': '?',
'5': '?',
'6': '?',
'7': '?',
'8': '?',
};
return config[abc];
}
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '生日',
key: 'birthday',
width: 120,
dataIndex: 'birthday'
},
{
title: '地址',
key: 'address',
width: 120,
fixed: 'right',
dataIndex: 'address'
},
{
title: '早起时间',
key: 'time',
width: 120,
fixed: 'right',
dataIndex: 'time'
}
];
const columns3 = [
{
title: 'id',
key: 'id',
dataIndex: 'id'
},
{
title: '用户名',
key: 'userName',
dataIndex: 'userName'
},
{
title: '性别',
key: 'sex',
dataIndex: 'sex',
render(sex) {
return sex == 1 ? '男' : '女'
}
},
{
title: '年龄',
key: 'age',
dataIndex: 'age',
sorter: (a, b) => a.age - b.age,
sortOrder: this.state.sortOrder,
},
{
title: '状态',
dataIndex: 'state',
render(state) {
let config = {
'1': '咸?一条',
'2': '风华浪子',
'3': '北大才子一枚',
'4': '百度FE',
'5': '创业者',
};
return config[state];
}
},
{
title: '爱好',
key: 'interest',
dataIndex: 'interest',
render(abc) {
let config = {
'1': '?',
'2': '?',
'3': '⚽',
'4': '?',
'5': '?',
'6': '?',
'7': '?',
'8': '?',
};
return config[abc];
}
},
{
title: '生日',
key: 'birthday',
dataIndex: 'birthday'
},
{
title: '地址',
key: 'address',
dataIndex: 'address'
},
{
title: '早起时间',
key: 'time',
dataIndex: 'time'
}
];
const columns4 = [
{
title: 'id',
width: 80,
dataIndex: 'id'
},
{
title: '用户名',
width: 80,
dataIndex: 'userName'
},
{
title: '性别',
width: 80,
dataIndex: 'sex',
render(sex) {
return sex == 1 ? '男' : '女'
}
},
{
title: '状态',
width: 80,
dataIndex: 'state',
render(state) {
let config = {
'1': "咸?一条",
'2': '风华浪子',
'3': '北大才子一枚',
'4': '百度FE',
'5': '创业者',
};
return config[state];
}
},
{
title: '爱好',
width: 80,
dataIndex: 'interest',
render(abc) {
let config = {
'1': <Badge status="success" text='?'/>,
'2': <Badge status="error" text='?'/>,
'3': <Badge status="default" text='⚽'/>,
'4': <Badge status="warning" text='?'/>,
'5': <Badge status="processing" text='?'/>,
'6': <Badge status="success" text='?'/>,
'7': <Badge status="error" text='?'/>,
'8': <Badge status="default" text='?'/>,
};
return config[abc];
}
},
{
title: '生日',
width: 120,
dataIndex: 'birthday'
},
{
title: '地址',
width: 120,
dataIndex: 'address'
},
{
title: '操作',
width: 120,
render: (text, item) => {
return <Button size="small" onClick={() => {
this.handleDelete(item)
}}>删除</Button>
}
}
];
return (
<div>
<Card title="头部固定" style={{margin: '10px 0'}}>
<Table
bordered
columns={columns1}
dataSource={this.state.dataSource}
pagination={false}
scroll={{y: 240}}
/>
</Card>
<Card title="左侧固定" style={{margin: '10px 0'}}>
<Table
bordered
columns={columns2}
dataSource={this.state.dataSource}
pagination={false}
scroll={{x: 1850}}
/>
</Card>
<Card title="表格排序" style={{margin: '10px 0'}}>
<Table
bordered
columns={columns3}
dataSource={this.state.dataSource}
pagination={false}
onChange={this.handleChange}
/>
</Card>
<Card title="表格操作" style={{margin: '10px 0'}}>
<Table
bordered
columns={columns4}
dataSource={this.state.dataSource}
pagination={false}
/>
</Card>
</div>
);
}
}
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
action | 上传的地址 | string|(file) => Promise | 无 |
showUploadList | 是否展示 uploadList, 可设为一个对象,用于单独设定 showPreviewIcon 和 showRemoveIcon | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true |
onChange | 上传文件改变时的状态,详见 onChange | Function | 无 |
listType | 上传列表的内建样式,支持三种基本样式 text , picture 和 picture-card | string | ‘text’ |