Ant Design Vue - 折叠组件中的自定义标题

如何解决Ant Design Vue - 折叠组件中的自定义标题

您好，我正在使用 Vue 和 Ant Design。所以我从 Ant Design 中选择了折叠组件：https://antdv.com/components/collapse/ 我的问题是在 Collapse.Panel 中有一个属性 header，它是 string，但我需要在那里放字符串（例如：v0.6.1.11）和日期，所以我可以添加 { {1}} 或类似日期。示例：

我尝试使用 margin-left: auto，然后简单地添加空格来实现该空间，但这不是响应式解决方案。

如何传入 header prop 纯 html 以便我可以在那里放置两个 white-space: pre 标签之类的东西，然后在标题和日期之间创建空间？

解决方法

根据 docs，我们可以利用面板属性 extra 插槽。

运行此示例代码

new Vue({
  el: "#app",data() {
    return {
       text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,activeKey: ['1'],expandIconPosition: 'left',};
  },computed:{
   currDate(){
     return new Date().toLocaleDateString()
   }
 }
});

.ant-collapse>.ant-collapse-item>.ant-collapse-header{
  display:flex;
  justify-content:space-between
}

<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.4.11/dist/antd.min.css">

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="http://bms.test/vendor/laravel-admin/moment/min/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/ant-design-vue@1.5.0/dist/antd.min.js"></script>


<div id="app">
  
    <a-collapse v-model="activeKey">
      <a-collapse-panel key="1" header="This is panel header 1">
        <p>{{ text }}</p>
        <div slot="extra">{{currDate}}</div>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
        <p>{{ text }}</p>
        <div  slot="extra">{{currDate}}</div>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="This is panel header 3" disabled>
        <p>{{ text }}</p>
        <div  slot="extra">{{currDate}}</div>
      </a-collapse-panel>
    </a-collapse>
</div>

您可以使用以下代码来实现。

 <a-collapse-panel key="1" header="heading 1">
        <p>Content</p>
        <template #extra><p>heading 2</p></template> <!-- for newer version -->
        <p slot="extra">heading 2</p> <!-- for older version -->
  </a-collapse-panel>