From e09c0dbc397c192831429c34bee1d60c02b08e35 Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Mon, 4 Jul 2022 21:39:53 +0800
Subject: [PATCH] docs(components): [transfer] improve and complete examples
 (#8471)

---
 docs/en-US/component/transfer.md        |  20 ++++-
 docs/examples/transfer/basic.vue        |  88 +------------------
 docs/examples/transfer/customizable.vue | 108 ++++++++++++++++++++++++
 docs/examples/transfer/filterable.vue   |  48 +++++++++++
 4 files changed, 179 insertions(+), 85 deletions(-)
 create mode 100644 docs/examples/transfer/customizable.vue
 create mode 100644 docs/examples/transfer/filterable.vue

diff --git a/docs/en-US/component/transfer.md b/docs/en-US/component/transfer.md
index 9401adbd1c..17d276d4bb 100644
--- a/docs/en-US/component/transfer.md
+++ b/docs/en-US/component/transfer.md
@@ -5,13 +5,31 @@ lang: en-US
 
 # Transfer
 
+## Basic usage
+
+:::demo Data is passed to Transfer via the `data` attribute. The data needs to be an object array, and each object should have these attributes: `key` being the identification of the data item, `label` being the displayed text, and `disabled` indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to `v-model`, and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the `v-model` with an array.
+
+transfer/basic
+
+:::
+
+## Filterable
+
+You can search and filter data items.
+
+:::demo Set the `filterable` attribute to `true` to enable filter mode. By default, if the data item `label` contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the `filter-method` attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.
+
+transfer/filterable
+
+:::
+
 ## Customizable
 
 You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.
 
 :::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. Plus, you can also use scoped slot to customize data items. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
 
-transfer/basic
+transfer/customizable
 
 :::
 
diff --git a/docs/examples/transfer/basic.vue b/docs/examples/transfer/basic.vue
index bcf0710273..c83f06b7e4 100644
--- a/docs/examples/transfer/basic.vue
+++ b/docs/examples/transfer/basic.vue
@@ -1,67 +1,9 @@
 <template>
-  <p style="text-align: center; margin: 0 0 20px">
-    Customize data items using render-content
-  </p>
-  <div style="text-align: center">
-    <el-transfer
-      v-model="leftValue"
-      style="text-align: left; display: inline-block"
-      filterable
-      :left-default-checked="[2, 3]"
-      :right-default-checked="[1]"
-      :render-content="renderFunc"
-      :titles="['Source', 'Target']"
-      :button-texts="['To left', 'To right']"
-      :format="{
-        noChecked: '${total}',
-        hasChecked: '${checked}/${total}',
-      }"
-      :data="data"
-      @change="handleChange"
-    >
-      <template #left-footer>
-        <el-button class="transfer-footer" size="small">Operation</el-button>
-      </template>
-      <template #right-footer>
-        <el-button class="transfer-footer" size="small">Operation</el-button>
-      </template>
-    </el-transfer>
-    <p style="text-align: center; margin: 50px 0 20px">
-      Customize data items using scoped slot
-    </p>
-    <div style="text-align: center">
-      <el-transfer
-        v-model="rightValue"
-        style="text-align: left; display: inline-block"
-        filterable
-        :left-default-checked="[2, 3]"
-        :right-default-checked="[1]"
-        :titles="['Source', 'Target']"
-        :button-texts="['To left', 'To right']"
-        :format="{
-          noChecked: '${total}',
-          hasChecked: '${checked}/${total}',
-        }"
-        :data="data"
-        @change="handleChange"
-      >
-        <template #default="{ option }">
-          <span>{{ option.key }} - {{ option.label }}</span>
-        </template>
-        <template #left-footer>
-          <el-button class="transfer-footer" size="small">Operation</el-button>
-        </template>
-        <template #right-footer>
-          <el-button class="transfer-footer" size="small">Operation</el-button>
-        </template>
-      </el-transfer>
-    </div>
-  </div>
+  <el-transfer v-model="value" :data="data" />
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import type { VNode, VNodeProps } from 'vue'
 
 interface Option {
   key: number
@@ -69,7 +11,7 @@ interface Option {
   disabled: boolean
 }
 
-const generateData = (): Option[] => {
+const generateData = () => {
   const data: Option[] = []
   for (let i = 1; i <= 15; i++) {
     data.push({
@@ -81,28 +23,6 @@ const generateData = (): Option[] => {
   return data
 }
 
-const data = ref(generateData())
-const rightValue = ref([1])
-const leftValue = ref([1])
-
-const renderFunc = (
-  h: (type: string, props: VNodeProps | null, children?: string) => VNode,
-  option: Option
-) => {
-  return h('span', null, option.label)
-}
-const handleChange = (
-  value: number | string,
-  direction: 'left' | 'right',
-  movedKeys: string[] | number[]
-) => {
-  console.log(value, direction, movedKeys)
-}
+const data = ref<Option[]>(generateData())
+const value = ref([])
 </script>
-
-<style>
-.transfer-footer {
-  margin-left: 15px;
-  padding: 6px 5px;
-}
-</style>
diff --git a/docs/examples/transfer/customizable.vue b/docs/examples/transfer/customizable.vue
new file mode 100644
index 0000000000..bcf0710273
--- /dev/null
+++ b/docs/examples/transfer/customizable.vue
@@ -0,0 +1,108 @@
+<template>
+  <p style="text-align: center; margin: 0 0 20px">
+    Customize data items using render-content
+  </p>
+  <div style="text-align: center">
+    <el-transfer
+      v-model="leftValue"
+      style="text-align: left; display: inline-block"
+      filterable
+      :left-default-checked="[2, 3]"
+      :right-default-checked="[1]"
+      :render-content="renderFunc"
+      :titles="['Source', 'Target']"
+      :button-texts="['To left', 'To right']"
+      :format="{
+        noChecked: '${total}',
+        hasChecked: '${checked}/${total}',
+      }"
+      :data="data"
+      @change="handleChange"
+    >
+      <template #left-footer>
+        <el-button class="transfer-footer" size="small">Operation</el-button>
+      </template>
+      <template #right-footer>
+        <el-button class="transfer-footer" size="small">Operation</el-button>
+      </template>
+    </el-transfer>
+    <p style="text-align: center; margin: 50px 0 20px">
+      Customize data items using scoped slot
+    </p>
+    <div style="text-align: center">
+      <el-transfer
+        v-model="rightValue"
+        style="text-align: left; display: inline-block"
+        filterable
+        :left-default-checked="[2, 3]"
+        :right-default-checked="[1]"
+        :titles="['Source', 'Target']"
+        :button-texts="['To left', 'To right']"
+        :format="{
+          noChecked: '${total}',
+          hasChecked: '${checked}/${total}',
+        }"
+        :data="data"
+        @change="handleChange"
+      >
+        <template #default="{ option }">
+          <span>{{ option.key }} - {{ option.label }}</span>
+        </template>
+        <template #left-footer>
+          <el-button class="transfer-footer" size="small">Operation</el-button>
+        </template>
+        <template #right-footer>
+          <el-button class="transfer-footer" size="small">Operation</el-button>
+        </template>
+      </el-transfer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { VNode, VNodeProps } from 'vue'
+
+interface Option {
+  key: number
+  label: string
+  disabled: boolean
+}
+
+const generateData = (): Option[] => {
+  const data: Option[] = []
+  for (let i = 1; i <= 15; i++) {
+    data.push({
+      key: i,
+      label: `Option ${i}`,
+      disabled: i % 4 === 0,
+    })
+  }
+  return data
+}
+
+const data = ref(generateData())
+const rightValue = ref([1])
+const leftValue = ref([1])
+
+const renderFunc = (
+  h: (type: string, props: VNodeProps | null, children?: string) => VNode,
+  option: Option
+) => {
+  return h('span', null, option.label)
+}
+const handleChange = (
+  value: number | string,
+  direction: 'left' | 'right',
+  movedKeys: string[] | number[]
+) => {
+  console.log(value, direction, movedKeys)
+}
+</script>
+
+<style>
+.transfer-footer {
+  margin-left: 15px;
+  padding: 6px 5px;
+}
+</style>
diff --git a/docs/examples/transfer/filterable.vue b/docs/examples/transfer/filterable.vue
new file mode 100644
index 0000000000..e77e9e4407
--- /dev/null
+++ b/docs/examples/transfer/filterable.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-transfer
+    v-model="value"
+    filterable
+    :filter-method="filterMethod"
+    filter-placeholder="State Abbreviations"
+    :data="data"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+interface Option {
+  key: number
+  label: string
+  initial: string
+}
+
+const generateData = () => {
+  const data: Option[] = []
+  const states = [
+    'California',
+    'Illinois',
+    'Maryland',
+    'Texas',
+    'Florida',
+    'Colorado',
+    'Connecticut ',
+  ]
+  const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
+  states.forEach((city, index) => {
+    data.push({
+      label: city,
+      key: index,
+      initial: initials[index],
+    })
+  })
+  return data
+}
+
+const data = ref<Option[]>(generateData())
+const value = ref([])
+
+const filterMethod = (query, item) => {
+  return item.initial.toLowerCase().includes(query.toLowerCase())
+}
+</script>