react+antd Table表头按钮一键展开或关闭

最新推荐文章于 2024-01-22 10:57:13 发布

Thelittlewhale

最新推荐文章于 2024-01-22 10:57:13 发布

阅读量6k

点赞数 4

文章标签： react

本文链接：https://blog.csdn.net/Thelittlewhale/article/details/105500713

版权

本文记录了在React项目中使用Antd Table组件实现表头一键展开或关闭所有子行的功能。通过监听按钮事件和调整Table属性实现，解决了表头按钮消失、图标显示错误以及滚动时图标移动等问题。最终解决方案是将展开按钮集成到Table的列定义中，并确保在调整窗口大小时图标位置正确。

摘要由CSDN通过智能技术生成

记录自己在解决这个需求中碰到的问题，首先在这里感谢Deidei☀️在这个过程中提供的帮助。Deidei☀️关于react项目中解决antd Table展开行可全部展开或关闭文章见 antd Table 展开行可全部展开或关闭

需求如图，在表头添加一个按钮，控制子表全部展开或关闭。
在这里插入图片描述
先看看antd Table官方文档对展开行的处理 antd表格 Table可展开
官方文档中对于表格展开行并没有一件全部展开或关闭，我在这里采用了Deidei☀️的解决方法：写一个表头按钮的样式放到同级的div中，再绝对定位到表格里。

初始化

constructor(props){
   
  super(props)
  this.state = {
   
      expKeys: [], // 初始化expKeys
   }
}

表头按钮样式

// 同级的div绝对定位，在上一级div中相对定位
<div style={
   {
    position: 'absolute', left: 30, top: 8, zIndex: 1 }}>
<div
  onClick={
   () => this.openOrCloseAll(true, adata)}  // openOrCloseAll点击表头按钮事件
  style={
   {
    display: this.state.expKeys.length ? 'inline-block' : 'none' }}
  className="ant-table-row-expand-icon ant-table-row-expanded"
/>
<div
  onClick={
   () => this.openOrCloseAll(false, adata)}
  style={
   {
    display: this.state.expKeys.length ? 'none' : 'inline-block' }}
  className="ant-table-row-expand-icon ant-table-row-collapsed"
/>
</div>

点击表头按钮事件

openOrCloseAll = (type, adata) => {
   
    this.setState({
   
        expKeys: type ? [] : adata && adata.map(i => i.id)
    })
  };

父表中Table的属性

<Table
  dataSource={
   adata}
  size="small"
  // 可控的展开与关闭数组
  expandedRowKeys={
   this.state.expKeys}
  // 单个展开或关闭，操作数组
  onExpand={
   (b, r) => {
   
  	const {
    expKeys } = this.state;
  	const newExp = b ? [...expKeys, r.id] <