foreword
Recently, I am learning the react-antd framework. The table is used very frequently in the project. I am learning this part recently, so record it.
Basic form request data
Generally, we will request the data in the table, and store the requested data in the table and display it.
When we request less, we can write it like this:
const [data, setData] = useState()
useEffect(() => {
const getData = async () => {
const {
data } = await axios.get('http://localhost:3001/user')
console.log(data)
const {
user } = {
...data }
setData(user)
}
getData()
}, [])
If there are multiple requests in the useEffect function and many async/await requests need to be written, the following writing method is required:
useEffect(async() => {
const getData = () => {
return axios.get('http://localhost:3001/user')
}
const getData2 = () => {
return axios.get('http://localhost:3001/user')
}
let a = await getData()
let a2 = await getData2()
console.log(a)
console.log(a2)
})
Then define the header data of the table:
const colums = [
{
title: 'id',
dataIndex: 'id'
},
{
title: '姓名',
dataIndex: 'name'
},
{
title: '年龄',
dataIndex: 'age'
},
{
title: '性别',
dataIndex: 'isMale',
render(isMale) {
return isMale === true ? '男' : '女'
}
},
{
title: '地址',
dataIndex: 'address'
},
{
title: '手机号',
dataIndex: 'phone'
}
]
Finally render the table:
dataSource is the data source, and columns is the content of the table header
return (
<div>
<Card title='基础表格'>
<Table dataSource={
data} columns={
colums} />
</Card>
</div>
)
Check the effect: (The data in the table is purely fictitious, if there is any similarity, no offense is intended)
table with delete function
If you want to add the function of row deletion to the table, how to achieve it?
First of all, we need to add a new column in the header column data, which is an operation, which is a button:
return a button directly through render, and add a click event to delete it.
const columns = [
{
id: 'ID',
dataIndex: 'key'
},
{
title: '姓名',
dataIndex: 'name'
},
{
title: '年龄',
dataIndex: 'age'
},
{
title: '地址',
dataIndex: 'address'
},
{
title: '操作',
key: 'operaion',
render: (row, record) => {
return <Button onClick={
() => removeItem(row, record.key)}>删除</Button>
}
}
]
Delete event:
Click the button and we set up a Modal pop-up window for secondary confirmation. The onOk in it is the content triggered by the secondary confirmation deletion. Here we do a simulated deletion. Of course, the actual development is to perform api request backend deletion.
const removeItem = (row, key) => {
console.log(row, key)
Modal.confirm({
title: '删除内容',
content: `你忍心删除${
row.name}吗？`,
onOk: () => {
setState(state.filter(item => item.key !== key))
message.success('删除成功!')
}
})
}
We have passed in the row and key data here, and let's see what is printed: we
can get the data of the current row and the row number, which is convenient for the deletion operation above.
Finally, the table is rendered:
const [state, setState] = useState(data)
return (
<div >
<Card>
<Table
dataSource={
state}
columns={
columns}
bordered />
</Card>
</div>
)
Check the effect:
set width or height bar
You can use scroll={ {x: 1200}} in the table tag to set the horizontal width, and then match the width of the div outside to achieve horizontal bars, and the same is true for vertical
return (
<div style={
{
'width': '1000px'}}>
<Card>
<Table
dataSource={
state}
columns={
columns}
scroll={
{
x: 1200}}
bordered />
</Card>
</div>
)
Take a look at the effect:
finally
Summarized the usage of some tables, how to request data, how to set buttons to delete data, etc. If you have any supplements or questions, you can discuss them in the comment area~
If it is helpful to you, you can like, follow, and support~