前言
最近在学习react-antd框架，表格这一块在项目中的使用频率很高，最近在学习这一块的内容，所以记录一下
基础表格请求数据
一般对于表格中的数据我们会进行请求，将请求到的数据存入表格中展示出来
当我们请求较少时可以这样写：
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()
}, [])
如果在useEffect函数中有多个请求，需要写很多async/await请求的时候，就需要下面这种写法：
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)
})
然后定义表格的表头数据：
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'
}
]
最后渲染表格：
dataSource就是数据源，columns就是表头的内容
return (
<div>
<Card title='基础表格'>
<Table dataSource={
data} columns={
colums} />
</Card>
</div>
)
查看效果：（表格中的数据纯属虚构，如有雷同，没有冒犯之意）
带删除功能的表格
如果要给表格加上行删除的功能，怎么实现呢？
首先，在表头columns数据中我们要新增一列是操作，里面是一个按钮：
直接通过render进行return一个按钮，在里面添加点击事件进行删除
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>
}
}
]
删除事件：
点击按钮我们设置出一个Modal弹窗进行二次确认，里面的onOk就是二次确认删除触发的内容，这里我们做一个模拟的删除，当然实际开发中是进行api请求后端删除
const removeItem = (row, key) => {
console.log(row, key)
Modal.confirm({
title: '删除内容',
content: `你忍心删除${
row.name}吗？`,
onOk: () => {
setState(state.filter(item => item.key !== key))
message.success('删除成功!')
}
})
}
我们这里传入了 row, key数据，看一下打印是什么东西：
能够获取到当前行的数据以及行号，也就是方便上面进行删除操作
最后渲染表格：
const [state, setState] = useState(data)
return (
<div >
<Card>
<Table
dataSource={
state}
columns={
columns}
bordered />
</Card>
</div>
)
查看效果：
设置宽度或高度条
可以使用table标签中的scroll={ {x: 1200}}设置横向宽度，然后搭配外面的div宽度，可以实现横向条，纵向的同理
return (
<div style={
{
'width': '1000px'}}>
<Card>
<Table
dataSource={
state}
columns={
columns}
scroll={
{
x: 1200}}
bordered />
</Card>
</div>
)
看下效果：
最后
总结了一些表格的用法，如何请求数据，如何设置按钮删除数据等等，如果有补充或者问题可以评论区一起讨论~
对你有帮助的话可以点赞关注支持一下呀~