antd,table组件, rowSelection 属性,renderCell方法。

623 阅读1分钟
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。