react + hooks实现antd Table组件 展开一个其他关闭(手风琴效果)

antd Table组件 - 手风琴

      • 用到的属性

用到的属性

expandedRowKeys={ string } 展开的行,控制属性


const [expandedRowKeys, setExpandedRowKeys] = useState([]);

const versionExpandHandle = (expanded: any, record: any) => {
  // expanded 展开 -> true
  let temp: any = [];
  if (expanded) {
    // 对应表格的rowKey
    temp.push(record.id);
  }
  setExpandedRowKeys(temp);
};

 <Table
   // 默认空
   expandedRowKeys={expandedRowKeys}
   rowKey={(record) => record.id}
   style={{ marginTop: '15px' }}
   columns={mergedColumns}
   expandable={{
   	 // 点击展开关闭时触发
     onExpand: (expanded, record) => versionExpandHandle(expanded, record),
   }}
   dataSource={productVersionsList && productVersionsList}
 />

你可能感兴趣的:(react,hook,antd,react,hooks,tablet)