docs(components): [transfer] improve and complete examples (#8471)

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>

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>

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>