import React, { Component } from 'react' import Axios from 'axios'; import qs from 'qs' import api from '@/services/api' import { Table } from 'antd'; export default class TableDemo extends Component { state = { selectedRowKeys: [], data: [], total: '' }; componentDidMount () { this.initData(1) } initData(current){ Axios.post(api.limitData,qs.stringify({page: current, limit: 5})).then(res=>{ //这里是请求的自己的数据 this.setState({ data: res.data.result.list, total: res.data.result.count }) }) } // 多选 onSelectChange = selectedRowKeys => { this.setState({ selectedRowKeys }); }; // 删除 onDelete = option => { // console.log(option) } // 获取分页器页码 limitData = current => { this.initData(current) } render() { const columns = [ { title: 'Id', dataIndex: 'id', sorter: (a, b) => a.id - b.id, //排序 }, { title: 'Title', dataIndex: 'title', }, { title: 'Tags', dataIndex: 'tags', }, { title: 'Thumb', dataIndex: 'thumb', render: record => ( <img src='/logo192.png' alt="" style={{width:'50px',height:'50px',borderRadius:'50%'}}/> ), }, { title: 'Action', dataIndex: 'action', render: (text, record) => ( <span> <a onClick={()=>this.onDelete(text)}>Delete</a> </span> ), }, ]; // 多选 const { selectedRowKeys } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; const hasSelected = selectedRowKeys.length > 0; // 多选 // 分页器 const pagination = { pageSize: 5, onChange: this.limitData, total: +this.state.total } return ( <> <div style={{ marginBottom: 16 }}> <span style={{ marginLeft: 8 }}> {hasSelected ? `已选中 ${selectedRowKeys.length} 条数据` : ''} </span> </div> <Table rowKey="id" columns={columns} dataSource={this.state.data} rowSelection={rowSelection} //checkbox pagination={pagination} //分页器 /> </> ) } }
import
React, {
Component }
from
'react'
import
Axios
from
'axios';
import
qs
from
'qs'
import
api
from
'@/services/api'
import {
Table }
from
'antd';
export
default
class
TableDemo
extends
Component {
state
= {
selectedRowKeys: [],
data: [],
total:
''
};
componentDidMount () {
this.
initData(
1)
}
initData(
current){
Axios.
post(
api.
limitData,
qs.
stringify({
page:
current,
limit:
5})).
then(
res
=>{
//这里是请求的自己的数据
this.
setState({
data:
res.
data.
result.
list,
total:
res.
data.
result.
count
})
})
}
// 多选
onSelectChange
=
selectedRowKeys
=> {
this.
setState({
selectedRowKeys });
};
// 删除
onDelete
=
option
=> {
// console.log(option)
}
// 获取分页器页码
limitData
=
current
=> {
this.
initData(
current)
}
render() {
const
columns
= [
{
title:
'Id',
dataIndex:
'id',
sorter: (
a,
b)
=>
a.
id
-
b.
id,
//排序
},
{
title:
'Title',
dataIndex:
'title',
},
{
title:
'Tags',
dataIndex:
'tags',
},
{
title:
'Thumb',
dataIndex:
'thumb',
render:
record
=> (
<
img
src
=
'/logo192.png'
alt
=
""
style
=
{{
width:
'50px',
height:
'50px',
borderRadius:
'50%'}
}/>
),
},
{
title:
'Action',
dataIndex:
'action',
render: (
text,
record)
=> (
<
span>
<
a
onClick
=
{()
=>
this.
onDelete(
text)
}>Delete</
a>
</
span>
),
},
];
// 多选
const {
selectedRowKeys }
=
this.
state;
const
rowSelection
= {
selectedRowKeys,
onChange:
this.
onSelectChange,
};
const
hasSelected
=
selectedRowKeys.
length
>
0;
// 多选
// 分页器
const
pagination
= {
pageSize:
5,
onChange:
this.
limitData,
total:
+
this.
state.
total
}
return (
<>
<
div
style
=
{{
marginBottom:
16 }
}>
<
span
style
=
{{
marginLeft:
8 }
}>
{
hasSelected
?
`已选中
${
selectedRowKeys.
length
}
条数据`
:
''
}
</
span>
</
div>
<
Table
rowKey
=
"id"
columns
=
{
columns
}
dataSource
=
{
this.
state.
data
}
rowSelection
=
{
rowSelection
}
//checkbox
pagination
=
{
pagination
}
//分页器
/>
</>
)
}
}