我需要做一个表与几个 accordion ，将嵌套在对方。
我想最后的结果会是这样的：
我想动态地创建这个表，因为我从API中填充数据，但是我已经不能通过用硬数据硬编码来让它完全按照我想要的方式工作。
我的实际代码如下所示（这是一个React组件，但我已经简化了它，因此所有html都在组件的return方法中）：
import React, { useEffect, useState } from 'react';
import { FaMinus, FaPlus } from 'react-icons/fa';
const TableComponent: React.FC = () => {
return (
<>
<div className="container test">
<div>
<table className="table table-sm table-bordered table-fixed accordion" id="firstTable">
<thead>
<tr>
<th className="bg-primary">Open first accordion</th>
<th className="bg-primary">First Group of th element</th>
<th className="bg-primary">First Group of th element</th>
<th className="bg-primary">First Group of th element</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#main-accordion1" data-bs-parent="#firstTable">
<th className="bg-primary">accordion button 1 <FaPlus size={20} /></th>
<td className="bg-primary">First Group of td element</td>
<td className="bg-primary">First Group of td element</td>
<td className="bg-primary">First Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="main-accordion1" data-bs-parent="#firstTable">
<td colSpan={12}>
<div>
<table className="table" id="secondTable">
<thead>
<tr>
<th className="bg-success">Open second accordion</th>
<th className="bg-success">Second Group of th element</th>
<th className="bg-success">Second Group of th element</th>
<th className="bg-success">Second Group of th element</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#sub-accordion1" data-bs-parent="#secondTable">
<th className="bg-success">accordion button 2 <FaPlus size={20} /></th>
<td className="bg-success">Second Group of td element</td>
<td className="bg-success">Second Group of td element</td>
<td className="bg-success">Second Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="sub-accordion1" data-bs-parent="#secondTable">
<td colSpan={12}>
<div>
<table className="table" id="thirdTable">
<thead>
<tr>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-bs-toggle="collapse" data-bs-target="#sub-accordion3" data-bs-parent="#secondTable">
<th className="bg-success">accordion button 2 <FaPlus size={20} /></th>
<td className="bg-success">Second Line of Second Group of td element</td>
<td className="bg-success">Second Line of Second Group of td element</td>
<td className="bg-success">Second Line of Second Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="sub-accordion3" data-bs-parent="#secondTable">
<td colSpan={12}>
<div>
<table className="table" id="thirdTable">
<thead>
<tr>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-bs-toggle="collapse" data-bs-target="#main-accordion2" data-bs-parent="#firstTable">
<th className="bg-primary">accordion button 1 <FaPlus size={20} /></th>
<td className="bg-primary">Second Line of First Group of td element</td>
<td className="bg-primary">Second Line of First Group of td element</td>
<td className="bg-primary">Second Line of First Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="main-accordion2" data-bs-parent="#firstTable">
<td colSpan={12}>
<div>
<table className="table" id="secondTable">
<thead>
<tr>
<th className="bg-success">Open second accordion</th>
<th className="bg-success">Second Second Group of th element</th>
<th className="bg-success">Second Second Group of th element</th>
<th className="bg-success">Second Second Group of th element</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#sub-accordion2" data-bs-parent="#secondTable">
<th className="bg-success">accordion button 2 <FaPlus size={20} /></th>
<td className="bg-success">Second Second Group of td element</td>
<td className="bg-success">Second Second Group of td element</td>
<td className="bg-success">Second Second Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="sub-accordion2" data-bs-parent="#secondTable">
<td colSpan={12}>
<div>
<table className="table" id="thirdTable">
<thead>
<tr>
<th className="bg-info">Third Third Group of th element</th>
<th className="bg-info">Third Third Group of th element</th>
<th className="bg-info">Third Third Group of th element</th>
<th className="bg-info">Third Third Group of th element</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-info">Third Third Group of td element</td>
<td className="bg-info">Third Third Group of td element</td>
<td className="bg-info">Third Third Group of td element</td>
<td className="bg-info">Third Third Group of td element</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</>
)
}
export default TableComponent;这段代码给出了以下结果：
但我还有两个问题：
- 尽管在html中指定了
table-bordered类，但表格中的单元格之间没有边框，您知道这是什么原因吗？ - 当我打开一个可折叠面板而另一个可折叠面板已经打开时，已经打开的可折叠面板会自动关闭，有人知道如何防止这种行为吗？
StepUp请求的stackbitz示例：
stackbitz example with only the application
stackbitz example with react file
我把两个链接，因为我不知道你想要哪一个，我猜这是第二个，但我把两个都在怀疑。
1条答案
按热度按时间6yjfywim1#
嵌套这么多的表格会使HTML变得很难读。也许你可以尝试只折叠
<tr>元素，而不是每次都使用一个新的<table>。可以通过省略
data-bs-parent使 accordion 保持打开状态看这里