Ant-Table加自定义的展开按钮

最新推荐文章于 2024-05-30 15:14:59 发布

° う

最新推荐文章于 2024-05-30 15:14:59 发布

阅读量593

点赞数 9

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/TRTR666/article/details/135194753

版权

1.效果图

实现代码

表格中加展开表格属性
设备展开表格的keys数组；

const [expandedRowKeys, setexpandedRowKeys] = useState<any>([])

在要展开的列内容中加操作图标
设置图标的点击事件

const open = (e: { target: { parentElement: { className: string | string[]; }; className: string; }; }, record: { id: any; }) => {
     const keys = expandedRowKeys
     if (e.target.parentElement.className.indexOf('hotZaction') !== -1) {
       keys.push(record.id);//点击的每一行的key的值保存下来。
       setexpandedRowKeys(keys)
       e.target.className='iconfont icon-jianshao' //关闭
       e.target.parentElement.className = 'hotSaction'
     } else {
 
       keys.splice(keys.indexOf(record.id), 1);//再次点击的时候从数组删除上次存入的key值。
       setexpandedRowKeys(keys)
       e.target.parentElement.className = 'hotZaction'
       e.target.className='iconfont icon-tianjia' //展开
     }
   }