import './App.css';
import { Table, Tooltip } from 'antd';
// 模拟数据
const data = [
{ key: '1', name: 'John Doe', age: 17 ,address:'local'},
{ key: '2', name: 'Jane Smith', age: 22 ,address:'local'},
{ key: '3', name: 'Jim Brown', age: 16 ,address:'remote'},
{ key: '4', name: 'Jill Davis', age: 25 ,address:'remote'},
];
// 列定义
const columns = [
{
// 这两行的两个单元格合并
title:'地址',
dataIndex:'address',
key:'address',
render:(text,record,index)=>{
if(index ===0){
return { props: { colSpan: 1, rowSpan: 2 }, children: text }
}
if (index === 1) {
return { props: { colSpan: 1, rowSpan: 0 }, children: null };
}
return text;
}
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
];
function App() {
return (
<div style = {{width: '100%', height: '400px'}}>
<Table
rowKey='key'
rowSelection={{
onChange:(list,l,info)=>{
console.log(list,l,info,'000000')
},
renderCell: (checked, record, index,node) => {
if (index === 0) {
return null
}
if (index === 1) {
console.log('iindex',index,node);
return {
...node,
props:{
...node.props,
style: {
position:'absolute',
top:-12,
left:15,
},
}
}
}
return node;
},
}}
onRow={record => {
return {
onClick: event => {}, // 点击行
onDoubleClick: event => {},
onContextMenu: event => {},
onMouseEnter: event => {
console.log(event.target,'envent')
}, // 鼠标移入行
onMouseLeave: event => {},
};
}}
columns={columns}
dataSource={data}
/>
</div>
);
}
export default App;
antd的table组件的rowSelection的rendercell方法不完善,无法使用rowSpan以及colSpan。