diff --git a/packages/components/collapse/__tests__/index.test.jsx b/packages/components/collapse/__tests__/index.test.jsx
index efe90bd60b..7bc9a100c5 100644
--- a/packages/components/collapse/__tests__/index.test.jsx
+++ b/packages/components/collapse/__tests__/index.test.jsx
@@ -17,8 +17,6 @@ describe('Collapse', () => {
         },
       });
 
-      const panel = wrapper.findComponent({ ref: '1' });
-
       expect(wrapper.classes()).not.toContain('t--border-less');
 
       borderless.value = true;
@@ -27,7 +25,6 @@ describe('Collapse', () => {
     });
 
     test(':defaultExpandAll', async () => {
-      const defaultExpandAll = ref(false);
       const wrapper = mount({
         setup() {
           return () => (
@@ -355,7 +352,7 @@ describe('CollapsePanel', () => {
       });
 
       const panel = wrapper.findComponent({ ref: '1' });
-      expect(panel.find('.t-collapse-panel__header > h4').html()).toBe('<h4>标题</h4>');
+      expect(panel.find('.t-collapse-panel__header-content > h4').html()).toBe('<h4>标题</h4>');
     });
 
     test('headerRightContent', () => {
@@ -374,7 +371,7 @@ describe('CollapsePanel', () => {
       });
 
       const panel = wrapper.findComponent({ ref: '1' });
-      expect(panel.find('.t-collapse-panel__header > div > span').html()).toBe('<span>操作</span>');
+      expect(panel.find('.t-collapse-panel__header-right-content > span').html()).toBe('<span>操作</span>');
     });
 
     test('content', () => {
diff --git a/packages/components/collapse/collapse-panel.tsx b/packages/components/collapse/collapse-panel.tsx
index edc2a9add6..69cb33b0d1 100644
--- a/packages/components/collapse/collapse-panel.tsx
+++ b/packages/components/collapse/collapse-panel.tsx
@@ -48,9 +48,7 @@ export default defineComponent({
       }
       e.stopPropagation();
     };
-    const handleHeaderRightContentClick = (e: MouseEvent) => {
-      e.stopPropagation();
-    };
+
     const renderDefaultIcon = () => {
       return <FakeArrow overlayClassName={`${componentName.value}__icon--default`} />;
     };
@@ -68,14 +66,11 @@ export default defineComponent({
         </div>
       );
     };
+
     const renderBlank = () => {
       return <div class={`${componentName.value}__header--blank`}></div>;
     };
-    const renderHeaderRightContent = () => {
-      const headerRightContent = renderTNodeJSX('headerRightContent');
 
-      return headerRightContent ? <div onClick={handleHeaderRightContentClick}>{headerRightContent}</div> : null;
-    };
     const renderHeader = () => {
       const cls = [
         `${componentName.value}__header`,
@@ -84,13 +79,27 @@ export default defineComponent({
         },
       ];
 
+      const handleHeaderRightContentClick = (e: MouseEvent) => {
+        e.stopPropagation();
+      };
+
+      const renderHeaderRightContent = () => (
+        <div class={`${componentName.value}__header-right-content`} onClick={handleHeaderRightContentClick}>
+          {renderTNodeJSX('headerRightContent')}
+        </div>
+      );
+
       return (
         <div class={cls} onClick={handleClick}>
-          {expandIconPlacement.value === 'left' && renderIcon()}
-          {renderTNodeJSX('header')}
+          <div class={`${componentName.value}__header-left`}>
+            {expandIconPlacement.value === 'left' && renderIcon()}
+          </div>
+          <div class={`${componentName.value}__header-content`}>{renderTNodeJSX('header')}</div>
           {renderBlank()}
-          {renderHeaderRightContent()}
-          {expandIconPlacement.value === 'right' && renderIcon()}
+          <div class={`${componentName.value}__header-right`}>
+            {renderHeaderRightContent()}
+            {expandIconPlacement.value === 'right' && renderIcon()}
+          </div>
         </div>
       );
     };