Material-UI 中的多个展开/折叠 TableRow 组件

Posted

技术标签:

【中文标题】Material-UI 中的多个展开/折叠 TableRow 组件【英文标题】:Multiple Expand/Collapse TableRow component in Material-UI 【发布时间】:2021-04-26 18:55:36 【问题描述】:

我正在使用 Material UI 表并尝试在折叠表中展开 TableRow,但我遇到了问题。目前,我的列表都已折叠,但它们链接到一个“打开”状态,所以如果我打开一个列表,所有其他列表都会打开。

在每个列表没有很多状态的情况下保持折叠彼此分开的最佳方法是什么。

请检查这里的代码: https://codesandbox.io/s/collapsetable-2wp59

我做错了什么?你能告诉我怎么做吗?

【问题讨论】:

【参考方案1】:

只需将带有 Collapse 的行移动到单独的组件中并在内部处理打开/关闭逻辑。 因此每一行都有自己的打开状态和更新功能。

这是您的更新示例:https://codesandbox.io/s/collapsetable-forked-kj8v6

【讨论】:

哇哦...感谢您帮助解决这个问题

以上是关于Material-UI 中的多个展开/折叠 TableRow 组件的主要内容,如果未能解决你的问题,请参考以下文章

展开或折叠时可展开的 UItableview 内容高度不同

一起为多个列表项设置动画(展开/折叠)

如何使用 Bootstrap-Vue 从父组件折叠/展开多个动态折叠?

如果 ONE 展开,则多个 Expander 必须折叠

vue结合elementUI折叠展开效果动画

idea tab窗口换行