[英]preserving state of accordion and expanded table rows
Ant 設計中是否有任何方法可以捕獲特定表行是否擴展的 state,如果頁面刷新或組件重新掛載在不同的 SPA 之間導航時應用 state?
還有辦法讓表格行的擴展像手風琴一樣工作。 即一次只能擴展一行?
在這一點上,我只是在研究 Ant-D,閱讀文檔並使用小代碼片段。
但是我找不到有關如何執行上述操作的文檔(即保留/恢復表/手風琴的 state),所以我不知道該嘗試什么。 我當然可以構建自定義的點點滴滴,但這會破壞擁有一個好的框架的目的。
希望有更優雅的解決方案。
檢查下一個示例,您應該參考的道具是:
onExpandedRowsChange
onExpand
expandedRowKeys
import { Table, Typography, Select, Radio } from 'antd';
const expandedRowRender = record => (
<Typography.Text code>{record.key}</Typography.Text>
);
export default function App() {
const [expandedRow, setExpandedRow] = useState(0);
const [radioValue, setRadioValue] = useState('accordion');
const [currentRow, setCurrentRow] = useState([]);
return (
<FlexBox>
<Radio.Group
style={{ width: 200 }}
value={radioValue}
onChange={e => setRadioValue(e.target.value)}
>
<Radio value="accordion">Accordion</Radio>
<Radio value="rowState">rowState</Radio>
</Radio.Group>
{radioValue === 'accordion' ? (
<Table
dataSource={dataSource}
columns={columns}
onExpand={(isExpanded, record) =>
setExpandedRow(isExpanded ? record.key : undefined)
}
expandedRowRender={expandedRowRender}
expandedRowKeys={[expandedRow]}
/>
) : (
<>
<Typography.Title>{currentRow}</Typography.Title>
<Table
dataSource={dataSource}
columns={columns}
expandedRowRender={expandedRowRender}
onExpandedRowsChange={setCurrentRow}
/>
</>
)}
</FlexBox>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.