ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端-怎样把手风琴和表格融合一起 [打印本页]

作者: 九天猎人 时间: 2025-1-6 03:14
标题: 前端-怎样把手风琴和表格融合一起
效果示意图：

模板代码：

[code]<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">

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)