Transfer: add clearQuery (#9753)

examples/docs/en-US/transfer.md

@@ -278,6 +278,11 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 | left-footer | content of left list footer |
 | right-footer | content of right list footer |
 
+### Methods
+| Method | Description | Parameters |
+| ---- | ---- | ---- |
+| clearQuery | clear the filter keyword of a certain panel | 'left' / 'right' |
+
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |

examples/docs/es/transfer.md

@@ -279,6 +279,11 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 | left-footer  | Contenido del footer de la lista de la izquierda |
 | right-footer | Contenido del footer de la lista de la derecha |
 
+### Methods
+| Method | Description | Parameters |
+| ---- | ---- | ---- |
+| clearQuery | clear the filter keyword of a certain panel | 'left' / 'right' |
+
 ### Eventos
 | Nombre | Descripcion                              | Parametros                               |
 | ------ | ---------------------------------------- | ---------------------------------------- |

examples/docs/zh-CN/transfer.md

@@ -275,6 +275,11 @@
 | left-footer | 左侧列表底部的内容 |
 | right-footer | 右侧列表底部的内容 |
 
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| clearQuery | 清空某个面板的搜索关键词 | 'left' / 'right'，指定需要清空的面板 |
+
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |

packages/theme-chalk/src/transfer.scss

@@ -207,6 +207,7 @@
     line-height: $--transfer-item-height;
     padding: 6px 15px 0;
     color: $--color-text-secondary;
+    text-align: center;
   }
 
   .el-checkbox__label {

packages/transfer/src/main.vue

@@ -2,6 +2,7 @@
   <div class="el-transfer">
     <transfer-panel
       v-bind="$props"
+      ref="leftPanel"
       :data="sourceData"
       :title="titles[0] || t('el.transfer.titles.0')"
       :default-checked="leftDefaultChecked"
@@ -29,6 +30,7 @@
     </div>
     <transfer-panel
       v-bind="$props"
+      ref="rightPanel"
       :data="targetData"
       :title="titles[1] || t('el.transfer.titles.1')"
       :default-checked="rightDefaultChecked"
@@ -183,6 +185,14 @@
         });
         this.$emit('input', currentValue);
         this.$emit('change', currentValue, 'right', this.leftChecked);
+      },
+
+      clearQuery(which) {
+        if (which === 'left') {
+          this.$refs.leftPanel.query = '';
+        } else if (which === 'right') {
+          this.$refs.rightPanel.query = '';
+        }
       }
     }
   };