antd Table行操作
需求:博主有个双击Table中的某一行,根据当前行数据,进入新页面的操作。
onRow 用法
适用于 onRow onHeaderRow onCell onHeaderCell。
antd官网链接:https://3x.ant.design/components/table-cn/#onRow-%E7%94%A8%E6%B3%95
<Table
onRow={record => {
return {
onClick: event => {}, // 点击行
onDoubleClick: event => {}, //双击
onContextMenu: event => {}, //右键菜单
onMouseEnter: event => {}, // 鼠标移入行
onMouseLeave: event => {},// 鼠标移出行
};
}}
onHeaderRow={column => {
return {
onClick: () => {}, // 点击表头行
};
}}
/>
例子:
//双击事件
onRowDoubleClick(record, index, event) {
console.log(index, record);
event.stopPropagation(); //阻止默认事件
},
render(){
return(
<Table
columns={columns}
dataSource={data}
onRow={(record,rowkey)=>{
return{
onDoubleClick : this.onRowDoubleClick.bind(this,record,rowkey) // record 指的当前行的数据内容,rowkey指的是当前行的下标
}
}}
/>
)
}