ant collapse组件 accordion失效

最新推荐文章于 2023-12-12 18:09:57 发布

青青的大宝贝

最新推荐文章于 2023-12-12 18:09:57 发布

阅读量538

点赞数

文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_41438668/article/details/130286549

版权

文章描述了一次在使用AntDesignVue的antcollapse组件时遇到的accordion模式失效的问题。代码示例展示了如何创建一个包含多个嵌套折叠面板的结构，每个面板有风险事件、管控措施和排查任务的数量统计。当尝试更改子级折叠面板时，事件处理(changgeGetTable)未能正常工作，导致accordion功能失效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一次 ant collapse组件 accordion失效

每个collapse每次只能打开一扇

<a-collapse
        v-model="activeKey"
        :accordion="accordion"
        v-for="(item, index) in riskObject"
        :key="index"
        :expand-icon-position="expandIconPosition"
      >
        <a-collapse-panel :key="String(index)">
          <template slot="header">
            <span>{{ item.cellName }}</span>
            <span style="margin-left: 150px">
              <span style="margin-left: 50px"
                >风险事件数量：<a-badge :count="item.eventCount" :number-style="{ backgroundColor: '#3b91ff' }"
              /></span>
              <span style="margin-left: 50px"
                >管控措施数量：<a-badge :count="item.controlCount" :number-style="{ backgroundColor: '#3b91ff' }"
              /></span>
              <span style="margin-left: 50px"
                >排查任务数：<a-badge :count="item.hiddenTaskCount" :number-style="{ backgroundColor: '#3b91ff' }"
              /></span>
            </span>
          </template>
          <template>
            <a-collapse
              v-model="activeKeyTO"
              :accordion="accordion"
              v-for="(itemto, indexto) in item.entRiskEvents"
              :key="indexto"
              @change="changgeGetTable(item.entRiskEvents[indexto].id)"
              :expand-icon-position="expandIconPosition"
            >
              <a-collapse-panel :key="String(indexto)" :header="itemto.eventName">
                <p>
                  <a-table
                    ref="table"
                    size="middle"
                    :scroll="{ x: 1300 }"
                    bordered
                    rowKey="id"
                    :columns="columnsTo"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    class="j-table-force-nowrap"
                    @change="
                      (pagination, filters, sorter) =>
                        changgeGet(pagination, filters, sorter, item.entRiskEvents[indexto].id)
                    "
                  >
                  </a-table>
                </p>
              </a-collapse-panel>
            </a-collapse>
          </template>
        </a-collapse-panel>
      </a-collapse>