九天猎人 发表于 2025-1-6 03:14:36

前端-怎样把手风琴和表格融合一起

效果示意图:

https://i-blog.csdnimg.cn/direct/89e15c57e054400784ebd6ab8e5b690d.png
模板代码:

<div style="width: 80%; overflow-x: scroll; overflow-y: scroll">
      <div style="margin-top: 5px; height: 500px">
      <table class="header-table">
          <thead>
            <tr>
            <th style="width: 10% !important">任务</th>
            <th style="width: 10% !important">状态</th>
            <th style="width: 8% !important">负责人</th>
            <th style="width: 7% !important">开始日期</th>
            <th style="width: 7% !important">结束日期</th>
            <th style="width: 12% !important">任务资料</th>
            <th style="width: 10% !important">备注</th>
            <th style="width: 12% !important">交付文件</th>
            <th style="width: 24% !important">操作</th>
            </tr>
          </thead>
      </table>
      <a-collapse
          v-model:activeKey="activeKey"
          style="background: #f0f0f0; border-radius: 0 !important"
          :bordered="false"
      >
          <a-collapse-panel
            v-for="(panel, index) in leftPage"
            :key="index"
            :header="panel.stageName"
            :show-arrow="true"
            style="padding: 0; margin: 0"
          >
            <table
            class="expanded-table"
            style="table-layout: fixed; width: 100%"
            >
            <tbody>
                <tr
                  v-for="(item, itemIndex) in panel.tasks"
                  :key="item.id"
                  style="background-color: #ffffff"
                >
                  <td style="width: 10% !important">
                  <a-tooltip placement="topLeft">
                      <template #title>{{ item.name }}</template>
                      {{ item.name }}
                      <span v-if="item.isMilestone">
页: [1]
查看完整版本: 前端-怎样把手风琴和表格融合一起