1.效果圖

image.png

實(shí)現(xiàn)代碼

• 表格中加展開表格屬性

  
  
  image.png
• 設(shè)備展開表格的keys數(shù)組；

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

• 在要展開的列內(nèi)容中加操作圖標(biāo)

  
  
  image.png
• 設(shè)置圖標(biāo)的點(diǎn)擊事件

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);//點(diǎn)擊的每一行的key的值保存下來。
       setexpandedRowKeys(keys)
       e.target.className='iconfont icon-jianshao' //關(guān)閉
       e.target.parentElement.className = 'hotSaction'
     } else {
 
       keys.splice(keys.indexOf(record.id), 1);//再次點(diǎn)擊的時候從數(shù)組刪除上次存入的key值。
       setexpandedRowKeys(keys)
       e.target.parentElement.className = 'hotZaction'
       e.target.className='iconfont icon-tianjia' //展開
     }
   }