From 3b1d48b4b4e16b46438cc2e079c69e3b8086f61a Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 22 May 2022 21:45:48 +0800
Subject: [PATCH] test: update test

---
 .../__tests__/__snapshots__/demo.test.js.snap | 745 +++++++++++-------
 .../__snapshots__/index.test.js.snap          |   4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  32 +-
 .../Table.rowSelection.test.js.snap           |  98 ++-
 .../__snapshots__/Table.sorter.test.js.snap   |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 157 +++-
 .../__snapshots__/empty.test.js.snap          |   2 +-
 components/table/demo/index.vue               |   3 +
 .../__tests__/__snapshots__/demo.test.js.snap | 147 +++-
 .../__snapshots__/index.test.js.snap          |   3 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 133 +++-
 .../__snapshots__/search.test.js.snap         |   4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  71 +-
 13 files changed, 983 insertions(+), 418 deletions(-)

diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index 7ef6e476f..0ef86f0f9 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -65,47 +65,74 @@ exports[`renders ./components/page-header/demo/actions.vue correctly 1`] = `
       <span
         class="ant-page-header-heading-extra"
       >
-        
-        <button
-          class="ant-btn"
-          type="button"
+        <div
+          class="ant-space ant-space-horizontal ant-space-align-center"
         >
           
+          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn"
-          type="button"
-        >
-          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn ant-btn-primary"
-          type="button"
-        >
-          
+          <div
+            class="ant-space-item"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Primary
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Primary
-          </span>
-          
-        </button>
-        
+        </div>
       </span>
     </div>
     <div
@@ -326,47 +353,74 @@ exports[`renders ./components/page-header/demo/actions.vue correctly 1`] = `
       <span
         class="ant-page-header-heading-extra"
       >
-        
-        <button
-          class="ant-btn"
-          type="button"
+        <div
+          class="ant-space ant-space-horizontal ant-space-align-center"
         >
           
+          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn"
-          type="button"
-        >
-          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn ant-btn-primary"
-          type="button"
-        >
-          
+          <div
+            class="ant-space-item"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Primary
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Primary
-          </span>
-          
-        </button>
-        
+        </div>
       </span>
     </div>
     <div
@@ -375,6 +429,7 @@ exports[`renders ./components/page-header/demo/actions.vue correctly 1`] = `
       
       <div
         class="ant-row"
+        role="row"
         type="flex"
       >
         
@@ -559,64 +614,66 @@ exports[`renders ./components/page-header/demo/breadcrumb.vue correctly 1`] = `
   class="ant-page-header has-breadcrumb ant-page-header-ghost"
   style="border: 1px solid rgb(235, 237, 240);"
 >
-  <div
+  <nav
     class="ant-breadcrumb"
   >
-    
-    <span>
-      <span
-        class="ant-breadcrumb-link"
-      >
-        
-        <a
-          href="#/index"
+    <ol>
+      
+      <li>
+        <span
+          class="ant-breadcrumb-link"
         >
-          First-level Menu
-        </a>
-        
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
-    </span>
-    <span>
-      <span
-        class="ant-breadcrumb-link"
-      >
-        
-        <a
-          href="#/index/first"
-        >
-          Second-level Menu
-        </a>
-        
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
-    </span>
-    <span>
-      <span
-        class="ant-breadcrumb-link"
-      >
-        
-        <span>
-          Third-level Menu
+          
+          <a
+            href="#/index"
+          >
+            First-level Menu
+          </a>
+          
         </span>
-        
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
-    </span>
-    
-  </div>
+        <span
+          class="ant-breadcrumb-separator"
+        >
+          /
+        </span>
+      </li>
+      <li>
+        <span
+          class="ant-breadcrumb-link"
+        >
+          
+          <a
+            href="#/index/first"
+          >
+            Second-level Menu
+          </a>
+          
+        </span>
+        <span
+          class="ant-breadcrumb-separator"
+        >
+          /
+        </span>
+      </li>
+      <li>
+        <span
+          class="ant-breadcrumb-link"
+        >
+          
+          <span>
+            Third-level Menu
+          </span>
+          
+        </span>
+        <span
+          class="ant-breadcrumb-separator"
+        >
+          /
+        </span>
+      </li>
+      
+    </ol>
+  </nav>
   <div
     class="ant-page-header-heading"
   >
@@ -653,64 +710,66 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
   <div
     class="ant-page-header has-breadcrumb ant-page-header-ghost site-page-header"
   >
-    <div
+    <nav
       class="ant-breadcrumb"
     >
-      
-      <span>
-        <span
-          class="ant-breadcrumb-link"
-        >
-          
-          <a
-            href="#/index"
+      <ol>
+        
+        <li>
+          <span
+            class="ant-breadcrumb-link"
           >
-            First-level Menu
-          </a>
-          
-        </span>
-        <span
-          class="ant-breadcrumb-separator"
-        >
-          /
-        </span>
-      </span>
-      <span>
-        <span
-          class="ant-breadcrumb-link"
-        >
-          
-          <a
-            href="#/index/first"
-          >
-            Second-level Menu
-          </a>
-          
-        </span>
-        <span
-          class="ant-breadcrumb-separator"
-        >
-          /
-        </span>
-      </span>
-      <span>
-        <span
-          class="ant-breadcrumb-link"
-        >
-          
-          <span>
-            Third-level Menu
+            
+            <a
+              href="#/index"
+            >
+              First-level Menu
+            </a>
+            
           </span>
-          
-        </span>
-        <span
-          class="ant-breadcrumb-separator"
-        >
-          /
-        </span>
-      </span>
-      
-    </div>
+          <span
+            class="ant-breadcrumb-separator"
+          >
+            /
+          </span>
+        </li>
+        <li>
+          <span
+            class="ant-breadcrumb-link"
+          >
+            
+            <a
+              href="#/index/first"
+            >
+              Second-level Menu
+            </a>
+            
+          </span>
+          <span
+            class="ant-breadcrumb-separator"
+          >
+            /
+          </span>
+        </li>
+        <li>
+          <span
+            class="ant-breadcrumb-link"
+          >
+            
+            <span>
+              Third-level Menu
+            </span>
+            
+          </span>
+          <span
+            class="ant-breadcrumb-separator"
+          >
+            /
+          </span>
+        </li>
+        
+      </ol>
+    </nav>
     <div
       class="ant-page-header-heading"
     >
@@ -755,82 +814,117 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
       <span
         class="ant-page-header-heading-extra"
       >
-        
-        <button
-          class="ant-btn"
-          type="button"
+        <div
+          class="ant-space ant-space-horizontal ant-space-align-center"
         >
           
-          <!---->
           
-          
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn"
-          type="button"
-        >
-          
-          <!---->
-          
-          
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn ant-btn-primary"
-          type="button"
-        >
-          
-          <!---->
-          
-          
-          <span>
-            Primary
-          </span>
-          
-        </button>
-        
-        <!---->
-        <button
-          class="ant-btn ant-dropdown-trigger"
-          style="padding: 0px;"
-          type="button"
-        >
-          
-          <!---->
-          
-          
-          <span
-            aria-label="ellipsis"
-            class="anticon anticon-ellipsis"
-            role="img"
-            style="font-size: 20px; vertical-align: top;"
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
           >
-            <svg
-              aria-hidden="true"
-              class=""
-              data-icon="ellipsis"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <button
+              class="ant-btn"
+              type="button"
             >
-              <path
-                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-              />
-            </svg>
-          </span>
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
+          <!---->
           
-        </button>
-        
-        
+          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
+          <!---->
+          
+          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Primary
+              </span>
+              
+            </button>
+          </div>
+          <!---->
+          
+          
+          <div
+            class="ant-space-item"
+          >
+            
+            <!---->
+            <button
+              class="ant-btn ant-dropdown-trigger"
+              style="padding: 0px;"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span
+                aria-label="ellipsis"
+                class="anticon anticon-ellipsis"
+                role="img"
+                style="font-size: 20px; vertical-align: top;"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="ellipsis"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+                  />
+                </svg>
+              </span>
+              
+            </button>
+            
+          </div>
+          <!---->
+          
+          
+        </div>
       </span>
     </div>
     <div
@@ -839,6 +933,7 @@ exports[`renders ./components/page-header/demo/content.vue correctly 1`] = `
       
       <div
         class="ant-row content"
+        role="row"
       >
         
         <div
@@ -970,47 +1065,74 @@ exports[`renders ./components/page-header/demo/ghost.vue correctly 1`] = `
       <span
         class="ant-page-header-heading-extra"
       >
-        
-        <button
-          class="ant-btn"
-          type="button"
+        <div
+          class="ant-space ant-space-horizontal ant-space-align-center"
         >
           
+          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn"
-          type="button"
-        >
-          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn ant-btn-primary"
-          type="button"
-        >
-          
+          <div
+            class="ant-space-item"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Primary
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Primary
-          </span>
-          
-        </button>
-        
+        </div>
       </span>
     </div>
     <div
@@ -1225,47 +1347,74 @@ exports[`renders ./components/page-header/demo/responsive.vue correctly 1`] = `
       <span
         class="ant-page-header-heading-extra"
       >
-        
-        <button
-          class="ant-btn"
-          type="button"
+        <div
+          class="ant-space ant-space-horizontal ant-space-align-center"
         >
           
+          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn"
-          type="button"
-        >
-          
+          <div
+            class="ant-space-item"
+            style="margin-right: 8px;"
+          >
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Operation
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Operation
-          </span>
-          
-        </button>
-        <button
-          class="ant-btn ant-btn-primary"
-          type="button"
-        >
-          
+          <div
+            class="ant-space-item"
+          >
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              
+              <!---->
+              
+              
+              <span>
+                Primary
+              </span>
+              
+            </button>
+          </div>
           <!---->
           
           
-          <span>
-            Primary
-          </span>
-          
-        </button>
-        
+        </div>
       </span>
     </div>
     <div
diff --git a/components/spin/__tests__/__snapshots__/index.test.js.snap b/components/spin/__tests__/__snapshots__/index.test.js.snap
index 8bea347ba..9a4eb6806 100644
--- a/components/spin/__tests__/__snapshots__/index.test.js.snap
+++ b/components/spin/__tests__/__snapshots__/index.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Spin should only affect the spin element when set style to a nested <Spin>xx</Spin> 1`] = `
 <div class="ant-spin-nested-loading">
   <div>
-    <div style="background: red;" class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
+    <div style="background: red;" class="ant-spin ant-spin-spinning" aria-live="polite" aria-busy="true"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
       <!---->
     </div>
   </div>
@@ -14,7 +14,7 @@ exports[`Spin should only affect the spin element when set style to a nested <Sp
 `;
 
 exports[`Spin should render custom indicator when it's set 1`] = `
-<div class="ant-spin ant-spin-spinning">
+<div class="ant-spin ant-spin-spinning" aria-live="polite" aria-busy="true">
   <div class="custom-indicator ant-spin-dot"></div>
   <!---->
 </div>
diff --git a/components/statistic/__tests__/__snapshots__/demo.test.js.snap b/components/statistic/__tests__/__snapshots__/demo.test.js.snap
index 89c18d055..096944f43 100644
--- a/components/statistic/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/statistic/__tests__/__snapshots__/demo.test.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/statistic/demo/basic.vue correctly 1`] = `
-<div class="ant-row">
-  <div class="ant-col ant-col-12">
+<div role="row" class="ant-row">
+  <div role="cell" class="ant-col ant-col-12">
     <div class="ant-statistic" style="margin-right: 50px;">
       <div class="ant-statistic-title">Active Users</div>
       <div class="ant-statistic-content">
@@ -11,7 +11,7 @@ exports[`renders ./components/statistic/demo/basic.vue correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="ant-col ant-col-12">
+  <div role="cell" class="ant-col ant-col-12">
     <div class="ant-statistic">
       <div class="ant-statistic-title">Account Balance (CNY)</div>
       <div class="ant-statistic-content">
@@ -25,8 +25,8 @@ exports[`renders ./components/statistic/demo/basic.vue correctly 1`] = `
 
 exports[`renders ./components/statistic/demo/card.vue correctly 1`] = `
 <div style="background: rgb(236, 236, 236); padding: 30px;">
-  <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
-    <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+  <div role="row" class="ant-row" style="margin-left: -8px; margin-right: -8px;">
+    <div role="cell" class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
       <div class="ant-card ant-card-bordered">
         <!---->
         <!---->
@@ -39,7 +39,7 @@ exports[`renders ./components/statistic/demo/card.vue correctly 1`] = `
         <!---->
       </div>
     </div>
-    <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+    <div role="cell" class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
       <div class="ant-card ant-card-bordered">
         <!---->
         <!---->
@@ -57,8 +57,8 @@ exports[`renders ./components/statistic/demo/card.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/statistic/demo/countdown.vue correctly 1`] = `
-<div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
-  <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+<div role="row" class="ant-row" style="margin-left: -8px; margin-right: -8px;">
+  <div role="cell" class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
     <div class="ant-statistic" style="margin-right: 50px;">
       <div class="ant-statistic-title">Countdown</div>
       <div class="ant-statistic-content">
@@ -67,7 +67,7 @@ exports[`renders ./components/statistic/demo/countdown.vue correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+  <div role="cell" class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
     <div class="ant-statistic" style="margin-right: 50px;">
       <div class="ant-statistic-title">Million Seconds</div>
       <div class="ant-statistic-content">
@@ -76,7 +76,7 @@ exports[`renders ./components/statistic/demo/countdown.vue correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="ant-col ant-col-24" style="padding-left: 8px; padding-right: 8px; margin-top: 32px;">
+  <div role="cell" class="ant-col ant-col-24" style="padding-left: 8px; padding-right: 8px; margin-top: 32px;">
     <div class="ant-statistic">
       <div class="ant-statistic-title">Day Level</div>
       <div class="ant-statistic-content">
@@ -89,8 +89,8 @@ exports[`renders ./components/statistic/demo/countdown.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/statistic/demo/countdown-slot.vue correctly 1`] = `
-<div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
-  <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+<div role="row" class="ant-row" style="margin-left: -8px; margin-right: -8px;">
+  <div role="cell" class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
     <div class="ant-statistic" style="margin-right: 50px;">
       <div class="ant-statistic-title"><span>Countdown</span>
         <!----><span role="img" aria-label="question-circle" style="margin-left: 5px;" tabindex="-1" class="anticon anticon-question-circle"><svg focusable="false" class="" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#1890ff"></path><path d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm0 632c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 00-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z" fill="#e6f7ff"></path><path d="M472 732a40 40 0 1080 0 40 40 0 10-80 0zm151.6-415.3C593.6 290.5 554 276 512 276s-81.6 14.4-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.2 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5 0-39.3-17.2-76-48.4-103.3z" fill="#1890ff"></path></svg></span>
@@ -101,7 +101,7 @@ exports[`renders ./components/statistic/demo/countdown-slot.vue correctly 1`] =
       </div>
     </div>
   </div>
-  <div class="ant-col ant-col-24" style="padding-left: 8px; padding-right: 8px; margin-top: 32px;">
+  <div role="cell" class="ant-col ant-col-24" style="padding-left: 8px; padding-right: 8px; margin-top: 32px;">
     <div class="ant-statistic" style="margin-right: 50px;">
       <div class="ant-statistic-title">Million Seconds countdown</div>
       <div class="ant-statistic-content"><span class="ant-statistic-content-prefix"><span>There's only</span></span><span class="ant-statistic-content-value">40:00:00:000</span><span class="ant-statistic-content-suffix"><span>left for the end.</span></span></div>
@@ -111,8 +111,8 @@ exports[`renders ./components/statistic/demo/countdown-slot.vue correctly 1`] =
 `;
 
 exports[`renders ./components/statistic/demo/unit.vue correctly 1`] = `
-<div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
-  <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+<div role="row" class="ant-row" style="margin-left: -8px; margin-right: -8px;">
+  <div role="cell" class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
     <div class="ant-statistic" style="margin-right: 50px;">
       <div class="ant-statistic-title">Feedback</div>
       <div class="ant-statistic-content">
@@ -120,7 +120,7 @@ exports[`renders ./components/statistic/demo/unit.vue correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+  <div role="cell" class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
     <div class="ant-statistic demo-class">
       <div class="ant-statistic-title">Unmerged</div>
       <div class="ant-statistic-content">
diff --git a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
index 392d7f744..e08fd7359 100644
--- a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
@@ -107,57 +107,55 @@ exports[`Table.rowSelection render with default selection correctly 1`] = `
 <div>
   <!---->
   <div class="ant-dropdown" style="pointer-events: none; display: none;">
-    <div class="ant-dropdown-content">
+    <!---->
+    <ul class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light" role="menu" data-menu-list="true">
+      <div>
+        <!---->
+        <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" style="pointer-events: none; display: none;">
+          <div class="ant-tooltip-content">
+            <div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
+            <div class="ant-tooltip-inner" role="tooltip">
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <li class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="all" aria-disabled="false">
+        <!----><span class="ant-dropdown-menu-title-content">Select all data</span>
+      </li>
+      <div>
+        <!---->
+        <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" style="pointer-events: none; display: none;">
+          <div class="ant-tooltip-content">
+            <div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
+            <div class="ant-tooltip-inner" role="tooltip">
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <li class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="invert" aria-disabled="false">
+        <!----><span class="ant-dropdown-menu-title-content">Invert current page</span>
+      </li>
+      <div>
+        <!---->
+        <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" style="pointer-events: none; display: none;">
+          <div class="ant-tooltip-content">
+            <div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
+            <div class="ant-tooltip-inner" role="tooltip">
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <li class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="none" aria-disabled="false">
+        <!----><span class="ant-dropdown-menu-title-content">Clear all data</span>
+      </li>
       <!---->
-      <ul class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light" role="menu" data-menu-list="true">
-        <div>
-          <!---->
-          <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" style="pointer-events: none; display: none;">
-            <div class="ant-tooltip-content">
-              <div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
-              <div class="ant-tooltip-inner" role="tooltip">
-                <!---->
-              </div>
-            </div>
-          </div>
-        </div>
-        <li class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="all" aria-disabled="false">
-          <!----><span class="ant-dropdown-menu-title-content">Select all data</span>
-        </li>
-        <div>
-          <!---->
-          <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" style="pointer-events: none; display: none;">
-            <div class="ant-tooltip-content">
-              <div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
-              <div class="ant-tooltip-inner" role="tooltip">
-                <!---->
-              </div>
-            </div>
-          </div>
-        </div>
-        <li class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="invert" aria-disabled="false">
-          <!----><span class="ant-dropdown-menu-title-content">Invert current page</span>
-        </li>
-        <div>
-          <!---->
-          <div class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip" style="pointer-events: none; display: none;">
-            <div class="ant-tooltip-content">
-              <div class="ant-tooltip-arrow"><span class="ant-tooltip-arrow-content"></span></div>
-              <div class="ant-tooltip-inner" role="tooltip">
-                <!---->
-              </div>
-            </div>
-          </div>
-        </div>
-        <li class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child" role="menuitem" tabindex="-1" data-menu-id="none" aria-disabled="false">
-          <!----><span class="ant-dropdown-menu-title-content">Clear all data</span>
-        </li>
-        <!---->
-        <!---->
-        <!--teleport start-->
-        <!--teleport end-->
-      </ul>
-    </div>
+      <!---->
+      <!--teleport start-->
+      <!--teleport end-->
+    </ul>
   </div>
 </div>
 `;
diff --git a/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap b/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
index e478e7776..0c7552317 100644
--- a/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Table.sorter renders sorter icon correctly 1`] = `
 <thead class="ant-table-thead">
   <tr>
-    <th class="ant-table-cell ant-table-column-has-sorters" colstart="0" colend="0">
+    <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" colstart="0" colend="0">
       <!---->
       <!---->
       <div class="ant-table-column-sorters"><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div>
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index f5d882d7c..b3df7eba0 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -886,7 +886,8 @@ exports[`renders ./components/table/demo/edit-row.vue correctly 1`] = `
             <!---->
             <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">10 / page</span>
               <!---->
-            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+            <!----></span>
             <!---->
           </div>
           <!---->
@@ -1320,7 +1321,127 @@ exports[`renders ./components/table/demo/filter-in-tree.vue correctly 1`] = `
                     </div>
                     <!---->
                   </th>
-                  <th class="ant-table-cell ant-table-column-has-sorters" colstart="1" colend="1">
+                  <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" colstart="1" colend="1">
+                    <!---->
+                    <!---->
+                    <div class="ant-table-column-sorters"><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div>
+                    <!---->
+                  </th>
+                  <th class="ant-table-cell" colstart="2" colend="2">
+                    <!---->
+                    <div class="ant-table-filter-column"><span class="ant-table-column-title">Address</span>
+                      <!----><span role="button" tabindex="-1" class="ant-table-filter-trigger ant-dropdown-trigger"><span role="img" aria-label="filter" class="anticon anticon-filter"><svg focusable="false" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></span></span>
+                    </div>
+                    <!---->
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="ant-table-tbody">
+                <!---->
+                <tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
+                  <td class="ant-table-cell">
+                    <!---->John Brown
+                    <!---->
+                  </td>
+                  <td class="ant-table-cell">
+                    <!---->32
+                    <!---->
+                  </td>
+                  <td class="ant-table-cell">
+                    <!---->New York No. 1 Lake Park
+                    <!---->
+                  </td>
+                </tr>
+                <!---->
+                <tr data-row-key="2" class="ant-table-row ant-table-row-level-0">
+                  <td class="ant-table-cell">
+                    <!---->Jim Green
+                    <!---->
+                  </td>
+                  <td class="ant-table-cell">
+                    <!---->42
+                    <!---->
+                  </td>
+                  <td class="ant-table-cell">
+                    <!---->London No. 1 Lake Park
+                    <!---->
+                  </td>
+                </tr>
+                <!---->
+                <tr data-row-key="3" class="ant-table-row ant-table-row-level-0">
+                  <td class="ant-table-cell">
+                    <!---->Joe Black
+                    <!---->
+                  </td>
+                  <td class="ant-table-cell">
+                    <!---->32
+                    <!---->
+                  </td>
+                  <td class="ant-table-cell">
+                    <!---->Sidney No. 1 Lake Park
+                    <!---->
+                  </td>
+                </tr>
+                <!---->
+                <tr data-row-key="4" class="ant-table-row ant-table-row-level-0">
+                  <td class="ant-table-cell">
+                    <!---->Jim Red
+                    <!---->
+                  </td>
+                  <td class="ant-table-cell">
+                    <!---->32
+                    <!---->
+                  </td>
+                  <td class="ant-table-cell">
+                    <!---->London No. 2 Lake Park
+                    <!---->
+                  </td>
+                </tr>
+                <!---->
+              </tbody>
+              <!---->
+            </table>
+          </div>
+        </div>
+        <!---->
+      </div>
+      <ul unselectable="on" class="ant-pagination ant-table-pagination ant-table-pagination-right">
+        <!---->
+        <li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
+        <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
+        <li title="Next Page" class="ant-pagination-next ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
+        <!---->
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/filter-search.vue correctly 1`] = `
+<div class="ant-table-wrapper">
+  <div class="ant-spin-nested-loading">
+    <!---->
+    <div class="ant-spin-container">
+      <div class="ant-table">
+        <!---->
+        <div class="ant-table-container">
+          <div class="ant-table-content">
+            <table style="table-layout: auto;">
+              <colgroup>
+                <col style="width: 30%;">
+                <col>
+                <col style="width: 40%;">
+              </colgroup>
+              <thead class="ant-table-thead">
+                <tr>
+                  <th class="ant-table-cell" colstart="0" colend="0">
+                    <!---->
+                    <div class="ant-table-filter-column"><span class="ant-table-column-title">Name</span>
+                      <!----><span role="button" tabindex="-1" class="ant-table-filter-trigger ant-dropdown-trigger"><span role="img" aria-label="filter" class="anticon anticon-filter"><svg focusable="false" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></span></span>
+                    </div>
+                    <!---->
+                  </th>
+                  <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" colstart="1" colend="1">
                     <!---->
                     <!---->
                     <div class="ant-table-column-sorters"><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div>
@@ -2255,7 +2376,8 @@ exports[`renders ./components/table/demo/fixed-columns-header.vue correctly 1`]
             <!---->
             <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">10 / page</span>
               <!---->
-            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+            <!----></span>
             <!---->
           </div>
           <!---->
@@ -3085,7 +3207,8 @@ exports[`renders ./components/table/demo/fixed-header.vue correctly 1`] = `
             <!---->
             <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">50 / page</span>
               <!---->
-            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+            <!----></span>
             <!---->
           </div>
           <!---->
@@ -3130,7 +3253,7 @@ exports[`renders ./components/table/demo/grouping-columns.vue correctly 1`] = `
                   </th>
                 </tr>
                 <tr>
-                  <th class="ant-table-cell ant-table-column-has-sorters" rowspan="3" colstart="1" colend="1">
+                  <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" rowspan="3" colstart="1" colend="1">
                     <!---->
                     <!---->
                     <div class="ant-table-column-sorters"><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div>
@@ -3590,7 +3713,8 @@ exports[`renders ./components/table/demo/grouping-columns.vue correctly 1`] = `
             <!---->
             <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">10 / page</span>
               <!---->
-            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+            <!----></span>
             <!---->
           </div>
           <!---->
@@ -3614,20 +3738,20 @@ exports[`renders ./components/table/demo/head.vue correctly 1`] = `
               <colgroup></colgroup>
               <thead class="ant-table-thead">
                 <tr>
-                  <th class="ant-table-cell ant-table-column-has-sorters" colstart="0" colend="0">
+                  <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" colstart="0" colend="0">
                     <!---->
                     <div class="ant-table-filter-column"><span class="ant-table-column-title"><!----><div class="ant-table-column-sorters"><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><span class="ant-table-column-sorter-inner"><!----><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div></span>
                     <!----><span role="button" tabindex="-1" class="ant-table-filter-trigger ant-dropdown-trigger"><span role="img" aria-label="filter" class="anticon anticon-filter"><svg focusable="false" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></span></span>
           </div>
           <!---->
           </th>
-          <th class="ant-table-cell ant-table-column-has-sorters ant-table-column-sort" colstart="1" colend="1">
+          <th aria-sort="descending" class="ant-table-cell ant-table-column-has-sorters ant-table-column-sort" tabindex="0" colstart="1" colend="1">
             <!---->
             <!---->
             <div class="ant-table-column-sorters"><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down active"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div>
             <!---->
           </th>
-          <th class="ant-table-cell ant-table-column-has-sorters" colstart="2" colend="2">
+          <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" colstart="2" colend="2">
             <!---->
             <div class="ant-table-filter-column"><span class="ant-table-column-title"><!----><div class="ant-table-column-sorters"><span class="ant-table-column-title">Address</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div></span>
             <!----><span role="button" tabindex="-1" class="ant-table-filter-trigger ant-dropdown-trigger"><span role="img" aria-label="filter" class="anticon anticon-filter"><svg focusable="false" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></span></span>
@@ -3734,19 +3858,19 @@ exports[`renders ./components/table/demo/multiple-sorter.vue correctly 1`] = `
                     <!---->Name
                     <!---->
                   </th>
-                  <th class="ant-table-cell ant-table-column-has-sorters" colstart="1" colend="1">
+                  <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" colstart="1" colend="1">
                     <!---->
                     <!---->
                     <div class="ant-table-column-sorters"><span class="ant-table-column-title">Chinese Score</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div>
                     <!---->
                   </th>
-                  <th class="ant-table-cell ant-table-column-has-sorters" colstart="2" colend="2">
+                  <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" colstart="2" colend="2">
                     <!---->
                     <!---->
                     <div class="ant-table-column-sorters"><span class="ant-table-column-title">Math Score</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div>
                     <!---->
                   </th>
-                  <th class="ant-table-cell ant-table-column-has-sorters" colstart="3" colend="3">
+                  <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" colstart="3" colend="3">
                     <!---->
                     <!---->
                     <div class="ant-table-column-sorters"><span class="ant-table-column-title">English Score</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div>
@@ -4213,20 +4337,20 @@ exports[`renders ./components/table/demo/reset-filter.vue correctly 1`] = `
                 <colgroup></colgroup>
                 <thead class="ant-table-thead">
                   <tr>
-                    <th class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters" colstart="0" colend="0">
+                    <th class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters" tabindex="0" colstart="0" colend="0">
                       <!---->
                       <div class="ant-table-filter-column"><span class="ant-table-column-title"><!----><div class="ant-table-column-sorters"><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div></span>
                       <!----><span role="button" tabindex="-1" class="ant-table-filter-trigger ant-dropdown-trigger"><span role="img" aria-label="filter" class="anticon anticon-filter"><svg focusable="false" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></span></span>
             </div>
             <!---->
             </th>
-            <th class="ant-table-cell ant-table-column-has-sorters" colstart="1" colend="1">
+            <th class="ant-table-cell ant-table-column-has-sorters" tabindex="0" colstart="1" colend="1">
               <!---->
               <!---->
               <div class="ant-table-column-sorters"><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div>
               <!---->
             </th>
-            <th class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters" colstart="2" colend="2">
+            <th class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters" tabindex="0" colstart="2" colend="2">
               <!---->
               <div class="ant-table-filter-column"><span class="ant-table-column-title"><!----><div class="ant-table-column-sorters"><span class="ant-table-column-title">Address</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div></span>
               <!----><span role="button" tabindex="-1" class="ant-table-filter-trigger ant-dropdown-trigger"><span role="img" aria-label="filter" class="anticon anticon-filter"><svg focusable="false" class="" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path></svg></span></span>
@@ -6013,7 +6137,8 @@ exports[`renders ./components/table/demo/sticky.vue correctly 1`] = `
             <!---->
             <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" style="opacity: 0;"></span><span class="ant-select-selection-item">10 / page</span>
               <!---->
-            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+            </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+            <!----></span>
             <!---->
           </div>
           <!---->
diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.js.snap
index 5498413d3..495bf5541 100644
--- a/components/table/__tests__/__snapshots__/empty.test.js.snap
+++ b/components/table/__tests__/__snapshots__/empty.test.js.snap
@@ -255,7 +255,7 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
 <div class="ant-table-wrapper">
   <div class="ant-spin-nested-loading">
     <div>
-      <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
+      <div class="ant-spin ant-spin-spinning" aria-live="polite" aria-busy="true"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
         <!---->
       </div>
     </div>
diff --git a/components/table/demo/index.vue b/components/table/demo/index.vue
index 8c7efd643..2564b5527 100644
--- a/components/table/demo/index.vue
+++ b/components/table/demo/index.vue
@@ -19,6 +19,7 @@
     <CustomFilterPanel />
     <ResetFilter />
     <filterSearchVue />
+    <filterInTreeVue />
     <RowSelectionAndOperation />
     <RowSelectionCustom />
     <RowSelection />
@@ -63,6 +64,7 @@ import Sticky from './sticky.vue';
 import ResizableColumn from './resizable-column.vue';
 import Responsive from './responsive.vue';
 import filterSearchVue from './filter-search.vue';
+import filterInTreeVue from './filter-in-tree.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -71,6 +73,7 @@ export default defineComponent({
   CN,
   US,
   components: {
+    filterInTreeVue,
     filterSearchVue,
     Basic,
     Ellipsis,
diff --git a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
index 4c850a5b5..c2d612cad 100644
--- a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -4,7 +4,8 @@ exports[`renders ./components/time-picker/demo/12hours.vue correctly 1`] = `
 <div class="ant-space ant-space-vertical">
   <div class="ant-space-item" style="margin-bottom: 8px;">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="12" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
         <!---->
       </div>
       <!---->
@@ -13,7 +14,8 @@ exports[`renders ./components/time-picker/demo/12hours.vue correctly 1`] = `
   <!---->
   <div class="ant-space-item" style="margin-bottom: 8px;">
     <div class="ant-picker" style="width: 140px;">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="11" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="11" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
         <!---->
       </div>
       <!---->
@@ -22,7 +24,8 @@ exports[`renders ./components/time-picker/demo/12hours.vue correctly 1`] = `
   <!---->
   <div class="ant-space-item">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
         <!---->
       </div>
       <!---->
@@ -36,7 +39,8 @@ exports[`renders ./components/time-picker/demo/addon.vue correctly 1`] = `
 <div class="ant-space ant-space-vertical">
   <div class="ant-space-item" style="margin-bottom: 8px;">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
         <!---->
       </div>
       <!---->
@@ -45,7 +49,8 @@ exports[`renders ./components/time-picker/demo/addon.vue correctly 1`] = `
   <!---->
   <div class="ant-space-item">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
         <!---->
       </div>
       <!---->
@@ -59,14 +64,18 @@ exports[`renders ./components/time-picker/demo/basic.vue correctly 1`] = `
 <div class="ant-space ant-space-vertical">
   <div class="ant-space-item" style="margin-bottom: 8px;">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="08:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="08:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+      </div>
       <!---->
     </div>
   </div>
   <!---->
   <div class="ant-space-item">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="09:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="09:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+      </div>
       <!---->
     </div>
   </div>
@@ -78,7 +87,8 @@ exports[`renders ./components/time-picker/demo/bordered.vue correctly 1`] = `
 <div class="ant-space ant-space-vertical">
   <div class="ant-space-item" style="margin-bottom: 8px;">
     <div class="ant-picker ant-picker-borderless">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
         <!---->
       </div>
       <!---->
@@ -90,7 +100,8 @@ exports[`renders ./components/time-picker/demo/bordered.vue correctly 1`] = `
       <div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start time" size="10" autocomplete="off"></div>
       <div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
       <div class="ant-picker-input"><input readonly="" placeholder="End time" size="10" autocomplete="off"></div>
-      <div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+      <div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+      <!----></span>
       <!---->
       <!---->
     </div>
@@ -101,7 +112,8 @@ exports[`renders ./components/time-picker/demo/bordered.vue correctly 1`] = `
 
 exports[`renders ./components/time-picker/demo/disabled.vue correctly 1`] = `
 <div class="ant-picker ant-picker-disabled">
-  <div class="ant-picker-input"><input disabled="" readonly="" placeholder="Select time" title="12:08:23" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+  <div class="ant-picker-input"><input disabled="" readonly="" placeholder="Select time" title="12:08:23" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+    <!----></span>
     <!---->
   </div>
   <!---->
@@ -110,26 +122,60 @@ exports[`renders ./components/time-picker/demo/disabled.vue correctly 1`] = `
 
 exports[`renders ./components/time-picker/demo/hide-column.vue correctly 1`] = `
 <div class="ant-picker">
-  <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="12:08" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
+  <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="12:08" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+    <!----></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+  </div>
   <!---->
 </div>
 `;
 
 exports[`renders ./components/time-picker/demo/interval-options.vue correctly 1`] = `
 <div class="ant-picker">
-  <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+  <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+    <!----></span>
     <!---->
   </div>
   <!---->
 </div>
 `;
 
+exports[`renders ./components/time-picker/demo/placement.vue correctly 1`] = `
+<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div>
+<br>
+<br>
+<div class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 12px;">
+    <div class="ant-picker">
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item">
+    <div class="ant-picker ant-picker-range">
+      <div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start time" size="10" autocomplete="off"></div>
+      <div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
+      <div class="ant-picker-input"><input readonly="" placeholder="End time" size="10" autocomplete="off"></div>
+      <div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+      <!----></span>
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/time-picker/demo/range-picker.vue correctly 1`] = `
 <div class="ant-picker ant-picker-range">
   <div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start time" size="10" autocomplete="off"></div>
   <div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
   <div class="ant-picker-input"><input readonly="" placeholder="End time" size="10" autocomplete="off"></div>
-  <div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+  <div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+  <!----></span>
   <!---->
   <!---->
 </div>
@@ -139,21 +185,76 @@ exports[`renders ./components/time-picker/demo/size.vue correctly 1`] = `
 <div class="ant-space ant-space-vertical">
   <div class="ant-space-item" style="margin-bottom: 8px;">
     <div class="ant-picker ant-picker-large">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="12:08:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="12:08:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+      </div>
       <!---->
     </div>
   </div>
   <!---->
   <div class="ant-space-item" style="margin-bottom: 8px;">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="12:08:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="12:08:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+      </div>
       <!---->
     </div>
   </div>
   <!---->
   <div class="ant-space-item">
     <div class="ant-picker ant-picker-small">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="12:08:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="12:08:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+      </div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`renders ./components/time-picker/demo/status.vue correctly 1`] = `
+<div class="ant-space ant-space-vertical" style="width: 100%;">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-picker ant-picker-status-error">
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-picker ant-picker-status-warning">
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-picker ant-picker-range ant-picker-status-error">
+      <div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start time" size="10" autocomplete="off"></div>
+      <div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
+      <div class="ant-picker-input"><input readonly="" placeholder="End time" size="10" autocomplete="off"></div>
+      <div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+      <!----></span>
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item">
+    <div class="ant-picker ant-picker-range ant-picker-status-warning">
+      <div class="ant-picker-input ant-picker-input-active"><input readonly="" placeholder="Start time" size="10" autocomplete="off"></div>
+      <div class="ant-picker-range-separator"><span aria-label="to" class="ant-picker-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
+      <div class="ant-picker-input"><input readonly="" placeholder="End time" size="10" autocomplete="off"></div>
+      <div class="ant-picker-active-bar" style="left: 0px; width: 0px; position: absolute;"></div><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+      <!----></span>
+      <!---->
       <!---->
     </div>
   </div>
@@ -163,7 +264,9 @@ exports[`renders ./components/time-picker/demo/size.vue correctly 1`] = `
 
 exports[`renders ./components/time-picker/demo/suffix.vue correctly 1`] = `
 <div class="ant-picker">
-  <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="00:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
+  <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="00:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+    <!----></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+  </div>
   <!---->
 </div>
 `;
@@ -176,7 +279,8 @@ exports[`renders ./components/time-picker/demo/value.vue correctly 1`] = `
   <!---->
   <div class="ant-space-item" style="margin-bottom: 8px;">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
         <!---->
       </div>
       <!---->
@@ -189,7 +293,8 @@ exports[`renders ./components/time-picker/demo/value.vue correctly 1`] = `
   <!---->
   <div class="ant-space-item" style="margin-bottom: 8px;">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span>
         <!---->
       </div>
       <!---->
@@ -202,7 +307,9 @@ exports[`renders ./components/time-picker/demo/value.vue correctly 1`] = `
   <!---->
   <div class="ant-space-item">
     <div class="ant-picker">
-      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="00:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></div>
+      <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="00:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+        <!----></span><span class="ant-picker-clear" role="button"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+      </div>
       <!---->
     </div>
   </div>
diff --git a/components/time-picker/__tests__/__snapshots__/index.test.js.snap b/components/time-picker/__tests__/__snapshots__/index.test.js.snap
index daf058ef6..69a64e2c9 100644
--- a/components/time-picker/__tests__/__snapshots__/index.test.js.snap
+++ b/components/time-picker/__tests__/__snapshots__/index.test.js.snap
@@ -2,7 +2,8 @@
 
 exports[`TimePicker not render clean icon when allowClear is false 1`] = `
 <div class="ant-picker">
-  <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="00:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span>
+  <div class="ant-picker-input"><input readonly="" placeholder="Select time" title="00:00:00" size="10" autocomplete="off"><span class="ant-picker-suffix"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+    <!----></span>
     <!---->
   </div>
   <!---->
diff --git a/components/transfer/__tests__/__snapshots__/demo.test.js.snap b/components/transfer/__tests__/__snapshots__/demo.test.js.snap
index 36b401be3..cc26180df 100644
--- a/components/transfer/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/transfer/__tests__/__snapshots__/demo.test.js.snap
@@ -9,7 +9,7 @@ exports[`renders ./components/transfer/demo/advanced.vue correctly 1`] = `
       <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>20 items</span><span class="ant-transfer-list-header-title"></span></span>
     </div>
     <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
-      <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span role="button" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix ant-input-clear-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+      <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span class="ant-input-clear-icon-hidden ant-input-clear-icon" role="button" tabindex="-1"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
         <!----></span></span>
       </div>
       <ul class="ant-transfer-list-content">
@@ -88,7 +88,7 @@ exports[`renders ./components/transfer/demo/advanced.vue correctly 1`] = `
       <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
     </div>
     <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
-      <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span role="button" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix ant-input-clear-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+      <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span class="ant-input-clear-icon-hidden ant-input-clear-icon" role="button" tabindex="-1"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
         <!----></span></span>
       </div>
       <div class="ant-transfer-list-body-not-found"><span>没数据</span></div>
@@ -536,7 +536,7 @@ exports[`renders ./components/transfer/demo/search.vue correctly 1`] = `
       <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>20 items</span><span class="ant-transfer-list-header-title"></span></span>
     </div>
     <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
-      <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span role="button" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix ant-input-clear-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+      <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span class="ant-input-clear-icon-hidden ant-input-clear-icon" role="button" tabindex="-1"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
         <!----></span></span>
       </div>
       <ul class="ant-transfer-list-content">
@@ -613,7 +613,7 @@ exports[`renders ./components/transfer/demo/search.vue correctly 1`] = `
       <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
     </div>
     <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
-      <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span role="button" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix ant-input-clear-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+      <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span class="ant-input-clear-icon-hidden ant-input-clear-icon" role="button" tabindex="-1"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
         <!----></span></span>
       </div>
       <div class="ant-transfer-list-body-not-found">
@@ -637,6 +637,131 @@ exports[`renders ./components/transfer/demo/search.vue correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/transfer/demo/status.vue correctly 1`] = `
+<div class="ant-space ant-space-vertical">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div class="ant-transfer ant-transfer-status-error">
+      <div class="ant-transfer-list">
+        <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+            <!---->
+          </label>
+          <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+        </div>
+        <div class="ant-transfer-list-body">
+          <!---->
+          <div class="ant-transfer-list-body-not-found">
+            <div class="ant-empty ant-empty-small ant-empty-normal">
+              <div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
+                  <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+                    <ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                    <g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
+                      <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                      <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
+                    </g>
+                  </g>
+                </svg></div>
+              <p class="ant-empty-description">No Data</p>
+              <!---->
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div class="ant-transfer-operation"><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></div>
+      <div class="ant-transfer-list">
+        <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+            <!---->
+          </label>
+          <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+        </div>
+        <div class="ant-transfer-list-body">
+          <!---->
+          <div class="ant-transfer-list-body-not-found">
+            <div class="ant-empty ant-empty-small ant-empty-normal">
+              <div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
+                  <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+                    <ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                    <g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
+                      <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                      <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
+                    </g>
+                  </g>
+                </svg></div>
+              <p class="ant-empty-description">No Data</p>
+              <!---->
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item">
+    <div class="ant-transfer ant-transfer-status-warning">
+      <div class="ant-transfer-list">
+        <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+            <!---->
+          </label>
+          <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+        </div>
+        <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
+          <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span class="ant-input-clear-icon-hidden ant-input-clear-icon" role="button" tabindex="-1"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+            <!----></span></span>
+          </div>
+          <div class="ant-transfer-list-body-not-found">
+            <div class="ant-empty ant-empty-small ant-empty-normal">
+              <div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
+                  <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+                    <ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                    <g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
+                      <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                      <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
+                    </g>
+                  </g>
+                </svg></div>
+              <p class="ant-empty-description">No Data</p>
+              <!---->
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div class="ant-transfer-operation"><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></div>
+      <div class="ant-transfer-list">
+        <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+            <!---->
+          </label>
+          <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+        </div>
+        <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
+          <div class="ant-transfer-list-body-search-wrapper"><span class="ant-input-affix-wrapper ant-transfer-list-search"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="Search here" type="text" class="ant-input"><span class="ant-input-suffix"><span class="ant-input-clear-icon-hidden ant-input-clear-icon" role="button" tabindex="-1"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
+            <!----></span></span>
+          </div>
+          <div class="ant-transfer-list-body-not-found">
+            <div class="ant-empty ant-empty-small ant-empty-normal">
+              <div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
+                  <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+                    <ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                    <g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
+                      <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                      <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
+                    </g>
+                  </g>
+                </svg></div>
+              <p class="ant-empty-description">No Data</p>
+              <!---->
+            </div>
+          </div>
+        </div>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
 <div>
   <div class="ant-transfer ant-transfer-customize-list">
diff --git a/components/transfer/__tests__/__snapshots__/search.test.js.snap b/components/transfer/__tests__/__snapshots__/search.test.js.snap
index c863a8915..5e4f09c89 100644
--- a/components/transfer/__tests__/__snapshots__/search.test.js.snap
+++ b/components/transfer/__tests__/__snapshots__/search.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Search should show cross icon when input value exists 1`] = `
-<span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="" type="text" class="ant-input"><span class="ant-input-suffix"><span role="button" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix ant-input-clear-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+<span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="" type="text" class="ant-input"><span class="ant-input-suffix"><span class="ant-input-clear-icon-hidden ant-input-clear-icon" role="button" tabindex="-1"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
 <!----></span></span>
 `;
 
 exports[`Search should show cross icon when input value exists 2`] = `
-<span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="" type="text" class="ant-input"><span class="ant-input-suffix"><span role="button" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon-has-suffix ant-input-clear-icon"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span>
+<span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span><input placeholder="" type="text" class="ant-input"><span class="ant-input-suffix"><span class="ant-input-clear-icon-hidden ant-input-clear-icon" role="button" tabindex="-1"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
 <!----></span></span>
 `;
diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
index db39f8555..ada0c8e0c 100644
--- a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
@@ -6,7 +6,8 @@ exports[`renders ./components/tree-select/demo/async.vue correctly 1`] = `
   <!---->
   <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
     <!----><span class="ant-select-selection-placeholder">Please select</span>
-  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+  <!----></span>
   <!---->
 </div>
 `;
@@ -17,7 +18,8 @@ exports[`renders ./components/tree-select/demo/basic.vue correctly 1`] = `
   <!---->
   <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list"></span>
     <!----><span class="ant-select-selection-placeholder">Please select</span>
-  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+  <!----></span>
   <!---->
 </div>
 `;
@@ -68,7 +70,8 @@ exports[`renders ./components/tree-select/demo/highlight.vue correctly 1`] = `
   <!---->
   <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list"></span>
     <!----><span class="ant-select-selection-placeholder">Please select</span>
-  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+  <!----></span>
   <!---->
 </div>
 `;
@@ -91,13 +94,64 @@ exports[`renders ./components/tree-select/demo/multiple.vue correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/tree-select/demo/placement.vue correctly 1`] = `
+<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div>
+<br>
+<br>
+<div class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search" customslots="[object Object]">
+  <!---->
+  <!---->
+  <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list"></span>
+    <!----><span class="ant-select-selection-placeholder">Please select</span>
+  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+  <!----></span>
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/tree-select/demo/replaceFields.vue correctly 1`] = `
 <div style="width: 100%;" class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search" customslots="[object Object]">
   <!---->
   <!---->
   <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list"></span>
     <!----><span class="ant-select-selection-placeholder">Please select</span>
-  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+  </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+  <!----></span>
+  <!---->
+</div>
+`;
+
+exports[`renders ./components/tree-select/demo/status.vue correctly 1`] = `
+<div class="ant-space ant-space-vertical" style="width: 100%;">
+  <div class="ant-space-item" style="margin-bottom: 8px;">
+    <div style="width: 100%;" class="ant-select ant-tree-select ant-select-status-error ant-select-single ant-select-show-arrow" customslots="[object Object]">
+      <!---->
+      <!---->
+      <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
+        <!----><span class="ant-select-selection-placeholder">Error</span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+      <!----></span>
+      <!---->
+    </div>
+  </div>
+  <!---->
+  <div class="ant-space-item">
+    <div style="width: 100%;" class="ant-select ant-tree-select ant-select-status-warning ant-select-multiple ant-select-show-search" customslots="[object Object]">
+      <!---->
+      <!---->
+      <div class="ant-select-selector">
+        <div class="ant-select-selection-overflow">
+          <!---->
+          <div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
+            <div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
+          </div>
+          <!---->
+        </div><span class="ant-select-selection-placeholder">Warning multiple</span>
+      </div>
+      <!---->
+      <!---->
+    </div>
+  </div>
   <!---->
 </div>
 `;
@@ -110,7 +164,8 @@ exports[`renders ./components/tree-select/demo/suffix.vue correctly 1`] = `
       <!---->
       <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list"></span>
         <!----><span class="ant-select-selection-placeholder">Please select</span>
-      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <!----></span>
       <!---->
     </div>
   </div>
@@ -127,7 +182,8 @@ exports[`renders ./components/tree-select/demo/suffix.vue correctly 1`] = `
           </div>
           <!---->
         </div><span class="ant-select-selection-placeholder">Please select</span>
-      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span></span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="smile" class="anticon anticon-smile"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
+      <!----></span>
       <!---->
     </div>
   </div>
@@ -155,7 +211,8 @@ exports[`renders ./components/tree-select/demo/tree-line.vue correctly 1`] = `
       <!---->
       <div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"></span>
         <!----><span class="ant-select-selection-placeholder">Please select</span>
-      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
+      <!----></span>
       <!---->
     </div>
   </div>