一. 自定义antd中的Collapse组件标题和下拉图标

直接上代码：

<a-collapse :bordered="false" expand-icon-position="right" :expand-icon="expandIcon" >
  <!-- 自定义下拉图标 -->
  <template #expandIcon>
    <a @click="fold">{{ isFold ? "展开" : "收起" }}
      <DownOutlined v-if="isFold" />
      <UpOutlined v-else />
    </a>
  </template>
  <a-collapse-panel key="1" :header="flightCollapseTitle">
    <!-- 自定义标题 -->
    <template #header>
      <span class="adcityDescStyle"></span>
    </template>
    <p>AAA</p>
  </a-collapse-panel>
</a-collapse>

脚本部分：

<script lang="ts" setup>
	// 是否折叠(收起/展开)
	const isFold = ref(false);
	const fold = () => {
	  isFold.value = !isFold.value;
	};
</script>

效果如下：