react-antd中表格的使用(数据的请求，带删除功能的表格)

前言

最近在学习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>
    )

看下效果：

最后

总结了一些表格的用法，如何请求数据，如何设置按钮删除数据等等，如果有补充或者问题可以评论区一起讨论~
对你有帮助的话可以点赞关注支持一下呀~