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