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

1.效果图

image.png

实现代码

• 表格中加展开表格属性

  
  
  image.png
• 设备展开表格的keys数组；

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

• 在要展开的列内容中加操作图标

  
  
  image.png
• 设置图标的点击事件

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' //展开
     }
   }