好像就喜欢配置写法。。，为什么呢？
另外，我想吐槽下，Dropdown 组件在 table 中太难用了，试了好多次才拿到每行的数据...
官方 demo:
const handleMenuClick = (e) => { message.info('Click on menu item.'); console.log('click', e); }; const items = [ { label: '1st menu item', key: '1', icon: <UserOutlined />, }, { label: '2nd menu item', key: '2', icon: <UserOutlined />, }, { label: '3rd menu item', key: '3', icon: <UserOutlined />, danger: true, }, { label: '4rd menu item', key: '4', icon: <UserOutlined />, danger: true, disabled: true, }, ]; const menuProps = { items, onClick: handleMenuClick, }; <Dropdown menu={menuProps}> <Button> <Space> Button <DownOutlined /> </Space> </Button> </Dropdown> 我的 demo:
const handleMenuClick = (e, record) => { console.log('e', e) console.log('record', record) if (e.key === 'updateRole') { handleShowUpdateRoleDialog(record.adminId) } if (e.key === 'edit') { handleShowEditDialog(record.adminId) } if (e.key === 'resetPassword') { handleShowResetPasswordDialog(record.adminId) } if (e.key === 'delete') { handleShowDeleteDialog(record.adminId) } } const items = [ { label: '分配角色', key: 'updateRole', }, { label: '编辑', key: 'edit', }, { label: '重置密码', key: 'resetPassword', danger: true, }, { label: '删除', key: 'delete', danger: true, }, ] // 点击下拉事件 const getMenuProps = (record) => { return { items, onClick: (e) => handleMenuClick(e, record), } } <Table dataSource={userList} rowKey={(record) => record.adminId} pagination={false} loading={loading} > <Column title="编号" dataIndex="adminId"></Column> <Column title="账号" dataIndex="username"></Column> <Column title="昵称" dataIndex="nickName"></Column> <Column title="邮箱" dataIndex="email"></Column> <Column title="添加时间" dataIndex="createTime" render={(_, record) => record.createTime ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '-' } /> <Column title="最后登录" dataIndex="loginTime" render={(_, record) => record.loginTime ? dayjs(record.loginTime).format('YYYY-MM-DD HH:mm:ss') : '-' } /> <Column title="是否启用" dataIndex="activeState" render={(_, record) => ( <Switch checked={record.activeState == 1} OnClick={(checked) => { updateState(record.adminId, checked ? 1 : 0) }} /> )} /> <Column title="操作" render={(text, record) => ( <Dropdown menu={getMenuProps(record)}> <Button> <Space> 操作 <DownOutlined /> </Space> </Button> </Dropdown> )} /> </Table> 
1
Select Language