Ant 设计 Vue - 折叠组件中的自定义 Header

Question

Hello I'am using Vue and Ant Design. So i pick Collapse Component from Ant Design: https://antdv.com/components/collapse/ My problem is that in Collapse.Panel there is a prop header which is string , but i need to put string in there (example: v0.6.1.11) and date, so i can add margin-left: auto or something like that in date. Exmaple:

I tried using white-space: pre and then simply add spaces to achive that space between but it's not responsive solution.

How can i pass into header prop pure html so i could put something like two <p> tags there and then create space between title and date?

Answer 1

As per docs , we can make use of Panel property extra slot.

Run this sample code

 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>

Answer 2

You can use the below code for the pupose.

 <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>