带复选框的表格(ant design)
程序员文章站
2024-02-05 12:51:58
...
要写个带复选框的表格,效果如下:
然而在官网看到这代码有点无语:
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}`,
});
}
我要的不是固定数据啊!!!于是开始探索~~
1、导入:
import { Table } from 'antd';
//这个是前后台分离的,userInfo为后台数据获取方法
import { userInfo } from '../../../api.js'
2、表格栏:
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Age',
dataIndex: 'age',
}, {
title: 'Address',
dataIndex: 'address',
}];
3、主体:
export default class personInfo extends Component{
constructor() {
super();
this.state = {
dataList:[],//表格列表
pagination: {//自定义分页器
showTotal: total => `共 ${total} 项`
},
};
}
componentWillMount(){
//表格数据
personInfo({pageSize:10,pageNum:1}).then(res => res.json()).then((res) => {
if (res.meta.code && res.meta.code == '200') {
if((res.data.total/10)>50){
this.state.pagination.showQuickJumper=true;
}
if (res.pageSize >= res.total) { //不足一页,分页器禁用
this.state.pagination = false
}
this.setState({
dataList:res.data['records'],
pagination:{
total:res.data['total'],
onChange:this.pageChange,
}
})
}
})
}
//表格使用
render(){
return (
<Table
dataSource={this.state.dataList}
columns={this.columns}
rowKey={"userName"} //如果数据中没有“key”这栏,必须要手动指定,否则会出错
rowSelection={this.rowSelection}//复选框
bordered //要边框
pagination = {this.state.pagination}
/>
) }//其他函数
rowSelection = { //复选框选定
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
}),
};
pageChange = (page, pageSize) => { //当前页码更改,page:请求的当前页码,pagesize:每页大小
this.setState({
loading:true,
})
let para = {pageNum:page, pageSize: pageSize};
personInfo(para).then(res => res.json()).then((res) => {
this.setState({
dataList:res.data['records'],
loading:false,
})
})
};
其他补充:
res.data的其他值:
total:总记录数
size:每页大小,默认为10
pages:总页数
current:当前页码
自定义分页器效果:
上一篇: Java中十六进制与十进制相互转换