antd的table实现鼠标移到某一行显示操作列的操作按钮

实现效果如下:
在这里插入图片描述
代码实现:

rowKey一定
<Table
                rowSelection={rowSelection}
                rowKey='id'
                onRow={this.onRow}
                rowClassName={this.setClassName}
                columns={columns}
                dataSource={data} />
// 鼠标移入每一行的事件
    onRow = (row, index) => {
        return {
            onMouseEnter: event => {
                const { dispatch } = this.props;
                dispatch ({
                    type: 'projectManage/upState',
                    payload: {
                        hoverIndex: index
                    },
                });
            },
            onMouseLeave: event => {
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,在你的表格中添加一个按钮,然后给它绑定一个点击事件。在点击事件中,你可以通过以下方式向表格中添加一行数据: 1. 在你的组件状态中定义一个数组,用于保存表格中的数据; 2. 在点击事件中创建一个新的数据对象,并将其添加到数据数组中; 3. 更新组件状态以反映新的数据数组。 以下是一个示例代码,演示如何增加一行数据到 Antd 表格中: ``` import React, { useState } from 'react'; import { Table, Button } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; const App = () => { const [tableData, setTableData] = useState(data); const handleAddRow = () => { const newRow = { key: Date.now(), // 自动生成一个唯一的 key name: 'New Person', age: 18, address: 'New Address', }; setTableData([...tableData, newRow]); }; return ( <> <Button onClick={handleAddRow}>Add Row</Button> <Table columns={columns} dataSource={tableData} /> </> ); }; export default App; ``` 在上面的示例代码中,我们首先定义了一个 `tableData` 状态变量,用于保存表格中的数据。然后,在点击事件中,我们创建了一个新的数据对象 `newRow`,并将其添加到 `tableData` 中。最后,我们更新了组件状态,以反映新的数据数组。 注意,我们在 `newRow` 对象中添加了一个自动生成的 `key` 属性,以确保每行数据都具有一个唯一的标识。这是 Antd 表格要求的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值