Ant 合并单元格+覆盖样式
项目需求：
最后一列用来展示详情，表格左侧点击行切换；要求选中行的样式和详情信息用一个边框凸显出来
结果如下：
切换效果展示如下：
实现过程：
在ant合并单元格demo中，找到在线编辑器实现初始版本，实现合并单元格
去除多余的表头和行、列简化项目代码：
const columns = [{title:'name'dataIndex:'name',render:(text) => <a>{text}</a>},{title: 'Age',dataIndex: 'age',},{title:'合并'dataIndex: 'tel',onCell:(_,index)=>{if(index === 0){return {rowSpan:5};}return {rowSpan:0}}},]
改造了column配置，onCell配置用第一行数据的单元格，平铺占满：效果如下图，
下面是做表格行点击选择，rowClassName属性设置单行class,通过设置这个方法对选中行添加单独的class
onRow方法可以控制表格每行的鼠标交互事件，因此点击选择行的核心代码如下：
import React, {useState} from 'react';import { Table } from 'antd';const App = () =>{const [selectIndex,setSelectIndex] = useState(0);return(<Tablecolumns={columns}dataSource={data}pagination={false}onRow={(record,index)=>{return{//点击行onClick:event=>{setSelectIndex(index)}}}}rowClassName={(record,index)=>{if(index === selectIndex) return 'selectedRow';return '';}}/> )}
接下来就来到CSS覆盖频道了，实现选中行包围详情背景＋边框了：
.ant-table-tbody > :first-child > :last-child {background: #f1f1ff;border: 1px solid red;}.selectedRow .ant-table-cell {background-color: #f1f1ff;background: #f1f1ff;border: 1px solid red;border-left: none;border-right: none;position: relative;}.selectedRow>:first-child {border-left: 1px solid red;border-radius: 2px 0 0 2px;}.selectedRow .ant-table-cell::after {content:' ';position:absolute;width: 4px;height: 54px;background: #f1f1ff;right: -2px;top: 0px;z-index: 999;}.ant-table-tbody > :first-child > :last-child::after {display: none;}.selectedRow .ant-table-cell-row-hover {background-color: #f1f1ff !important;background: #f1f1ff !important;}
上面这些CSS都是常规操作，：1- 核心逻辑是给selectedRow下面的每个单元格加边框、加背景；2-然后通过每个单元格的after伪类覆盖掉不需要的边框
最后是在右侧单元格上显示选中行的详情了，1-这一步实现思路是直接把columns改造成函数，传入选中行下标作为参数；2-最后在右侧单元格的render方法中获取到选中行的数据，然后展示详细信息
const columns = (index)=>[{title: 'Name',dataIndex: 'name',render: (text) => <a>{text}</a>,},{title: 'Age',dataIndex: 'age',},{title: 'Home phone',dataIndex: 'tel',onCell: (_, index) => {if (index === 0) {return {rowSpan: 5,};}return {rowSpan: 0};},render:()=>{const current = data[index];return <div><div>name：{current.name}</div><div>age：{current.age}</div><div>phone：{current.phone}</div><div>address：{current.address}</div></div>;}},];// 调用时columns传入唯一标识就好了// <Table columns={columns(selectIndex)} ...
这样改造之后，点击就可以显示具体详情了，实际项目中还是要改回 id 之类的唯一健。
最后附上demo.js文件，全部代码
demo.js
import React, { useState } from "react";import "antd/dist/antd.css";import "./index.css";import { Table } from "antd";const data = [{key: "1",name: "张三",age: 32,tel: "0571-22098909",phone: 18889898989,address: "New York No. 1 Lake Park"},{key: "2",name: "晓余",tel: "0571-22098333",phone: 18889898888,age: 42,address: "London No. 1 Lake Park"},{key: "3",name: "布布",age: 32,tel: "0575-22098909",phone: 18900010002,address: "Sidney No. 1 Lake Park"},{key: "4",name: "小红",age: 18,tel: "0575-22098909",phone: 18900010002,address: "London No. 2 Lake Park"},{key: "5",name: "小张",age: 18,tel: "0575-22098909",phone: 18900010002,address: "Dublin No. 2 Lake Park"}];const columns = (index) => [{title: "姓名",dataIndex: "name",render: (text) => <a>{text}</a>},{title: "年龄",dataIndex: "age"},{title: "详情信息",dataIndex: "tel",onCell: (_, index) => {if (index === 0) {return {rowSpan: 5};}return { rowSpan: 0 };},render: () => {const current = data[index];return (<div><div>姓名：{current.name}</div><div>年龄：{current.age}</div><div>联系方式：{current.phone}</div><div>联系地址：{current.address}</div></div>);}}];const App = () => {const [selectIndex, setSelectIndex] = useState(0);return (<Tablecolumns={columns(selectIndex)}dataSource={data}onRow={(record, index) => {return {// 点击行onClick: (event) => {setSelectIndex(index);}};}}rowClassName={(record, index) => {if (index === selectIndex) return "selectedRow";return "";}}/>);};export default App;
index.css
.ant-table-tbody > :first-child > :last-child {background: #f1f1ff;border: 1px solid red;}.selectedRow .ant-table-cell {background-color: #f1f1ff;background: #f1f1ff;border: 1px solid red;border-left: none;border-right: none;position: relative;}.selectedRow > :first-child {border-left: 1px solid red;border-radius: 2px 0 0 2px;}.selectedRow .ant-table-cell::after {content: " ";position: absolute;width: 4px;height: 54px;background: #f1f1ff;right: -2px;top: 0px;z-index: 999;}.ant-table-tbody > :first-child > :last-child::after {display: none;}.selectedRow .ant-table-cell-row-hover {background: #f1f1ff !important;}
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="theme-color" content="#000000"></head><body><div id="container" style="padding: 24px" /><script>var mountNode = document.getElementById('container');</script></body></html>
index.js
import React from 'react';import ReactDOM from 'react-dom';import Demo from './demo';ReactDOM.render(<Demo />, document.getElementById('container'));
效果图附上：
目录
Ant 合并单元格+覆盖样式
实现过程：
demo.js
index.css
index.html
index.js
