diff --git a/website/docs/en-US/transfer.md b/website/docs/en-US/transfer.md
index 21f0563091..11f3888f07 100644
--- a/website/docs/en-US/transfer.md
+++ b/website/docs/en-US/transfer.md
@@ -10,8 +10,8 @@ You can customize list titles, button texts, render function for data items, che
   <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"
-      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -22,16 +22,21 @@ You can customize list titles, button texts, render function for data items, che
         noChecked: '${total}',
         hasChecked: '${checked}/${total}'
       }"
+      :data="data"
       @change="handleChange"
-      :data="data">
-      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
-      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
+    >
+      <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"
-        v-model="value4"
         filterable
         :left-default-checked="[2, 3]"
         :right-default-checked="[1]"
@@ -41,21 +46,28 @@ You can customize list titles, button texts, render function for data items, che
           noChecked: '${total}',
           hasChecked: '${checked}/${total}'
         }"
+        :data="data"
         @change="handleChange"
-        :data="data">
-        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
-        <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
-        <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
+      >
+        <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>
 
 <style>
-  .transfer-footer {
-    margin-left: 20px;
-    padding: 6px 5px;
-  }
+.transfer-footer {
+  margin-left: 20px;
+  padding: 6px 5px;
+}
 </style>
 
 <script>
@@ -74,8 +86,8 @@ You can customize list titles, button texts, render function for data items, che
       };
       return {
         data: generateData(),
-        value: [1],
-        value4: [1],
+        rightValue: [1],
+        leftValue: [1],
         renderFunc(h, option) {
           return h("span", null, option.key, " - ", option.label);
         }
diff --git a/website/docs/es/transfer.md b/website/docs/es/transfer.md
index 71bab92466..dacb1dc292 100644
--- a/website/docs/es/transfer.md
+++ b/website/docs/es/transfer.md
@@ -42,12 +42,12 @@ Puede buscar y filtrar los items.
 ```html
 <template>
   <el-transfer
+    v-model="value"
     filterable
     :filter-method="filterMethod"
     filter-placeholder="State Abbreviations"
-    v-model="value"
-    :data="data">
-  </el-transfer>
+    :data="data"
+  />
 </template>
 
 <script>
@@ -89,8 +89,8 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
   <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"
-      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -101,17 +101,22 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
         noChecked: '${total}',
         hasChecked: '${checked}/${total}'
       }"
+      :data="data"
       @change="handleChange"
-      :data="data">
-      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
-      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
+    >
+      <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>
   <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"
-      v-model="value4"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -121,20 +126,27 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
         noChecked: '${total}',
         hasChecked: '${checked}/${total}'
       }"
+      :data="data"
       @change="handleChange"
-      :data="data">
-      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
-      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
-      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
+    >
+      <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>
 </template>
 
 <style>
-  .transfer-footer {
-    margin-left: 20px;
-    padding: 6px 5px;
-  }
+.transfer-footer {
+  margin-left: 20px;
+  padding: 6px 5px;
+}
 </style>
 
 <script>
@@ -153,8 +165,8 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
       };
       return {
         data: generateData(),
-        value: [1],
-        value4: [1],
+        leftValue: [1],
+        rightValue: [1],
         renderFunc(h, option) {
           return h("span", null, option.key, " - ", option.label);
         }
@@ -184,8 +196,8 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
       key: 'value',
       label: 'desc'
     }"
-    :data="data">
-  </el-transfer>
+    :data="data"
+  />
 </template>
 
 <script>
diff --git a/website/docs/fr-FR/transfer.md b/website/docs/fr-FR/transfer.md
index 456ddca47d..af03f71a8d 100644
--- a/website/docs/fr-FR/transfer.md
+++ b/website/docs/fr-FR/transfer.md
@@ -44,12 +44,12 @@ Vous pouvez filtrer les options.
 ```html
 <template>
   <el-transfer
+    v-model="value"
     filterable
     :filter-method="filterMethod"
     filter-placeholder="State Abbreviations"
-    v-model="value"
-    :data="data">
-  </el-transfer>
+    :data="data"
+  />
 </template>
 
 <script>
@@ -91,8 +91,8 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
   <p style="text-align: center; margin: 0 0 20px">Utilise render-content</p>
   <div style="text-align: center">
     <el-transfer
+      v-model="leftValue"
       style="text-align: left; display: inline-block"
-      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -103,16 +103,21 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
         noChecked: '${total}',
         hasChecked: '${checked}/${total}'
       }"
+      :data="data"
       @change="handleChange"
-      :data="data">
-      <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>
-      <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>
+    >
+      <template #left-footer>
+        <el-button class="transfer-footer" size="small">Opération</el-button>
+      </template>
+      <template #right-footer>
+        <el-button class="transfer-footer" size="small">Opération</el-button>
+      </template>
     </el-transfer>
     <p style="text-align: center; margin: 50px 0 20px">Utilise des slots</p>
     <div style="text-align: center">
       <el-transfer
+        v-model="rightValue"
         style="text-align: left; display: inline-block"
-        v-model="value4"
         filterable
         :left-default-checked="[2, 3]"
         :right-default-checked="[1]"
@@ -122,21 +127,28 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
           noChecked: '${total}',
           hasChecked: '${checked}/${total}'
         }"
+        :data="data"
         @change="handleChange"
-        :data="data">
-        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
-        <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>
-        <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>
+      >
+        <template #default="{ option }">
+          <span>{{ option.key }} - {{ option.label }}</span>
+        </template>
+        <template #left-footer>
+          <el-button class="transfer-footer" size="small">Opération</el-button>
+        </template>
+        <template #right-footer>
+          <el-button class="transfer-footer" size="small">Opération</el-button>
+        </template>
       </el-transfer>
     </div>
   </div>
 </template>
 
 <style>
-  .transfer-footer {
-    margin-left: 20px;
-    padding: 6px 5px;
-  }
+.transfer-footer {
+  margin-left: 20px;
+  padding: 6px 5px;
+}
 </style>
 
 <script>
@@ -155,8 +167,8 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
       };
       return {
         data: generateData(),
-        value: [1],
-        value4: [1],
+        leftValue: [1],
+        rightValue: [1],
         renderFunc(h, option) {
           return h("span", null, option.key, " - ", option.label);
         }
@@ -186,8 +198,8 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos
       key: 'value',
       label: 'desc'
     }"
-    :data="data">
-  </el-transfer>
+    :data="data"
+  />
 </template>
 
 <script>
diff --git a/website/docs/zh-CN/transfer.md b/website/docs/zh-CN/transfer.md
index b1ca40b368..bef7ce5409 100644
--- a/website/docs/zh-CN/transfer.md
+++ b/website/docs/zh-CN/transfer.md
@@ -4,7 +4,7 @@
 :::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。
 ```html
 <template>
-  <el-transfer v-model="value" :data="data"></el-transfer>
+  <el-transfer v-model="value" :data="data" />
 </template>
 
 <script>
@@ -39,12 +39,12 @@
 ```html
 <template>
   <el-transfer
+    v-model="value"
     filterable
     :filter-method="filterMethod"
     filter-placeholder="请输入城市拼音"
-    v-model="value"
-    :data="data">
-  </el-transfer>
+    :data="data"
+  />
 </template>
 
 <script>
@@ -86,8 +86,8 @@
   <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>
   <div style="text-align: center">
     <el-transfer
+      v-model="leftValue"
       style="text-align: left; display: inline-block"
-      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -98,17 +98,22 @@
         noChecked: '${total}',
         hasChecked: '${checked}/${total}'
       }"
+      :data="data"
       @change="handleChange"
-      :data="data">
-      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
-      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
+    >
+      <template #left-footer>
+        <el-button class="transfer-footer" size="small">操作</el-button>
+      </template>
+      <template #right-footer>
+        <el-button class="transfer-footer" size="small">操作</el-button>
+      </template>
     </el-transfer>
   </div>
   <p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>
   <div style="text-align: center">
     <el-transfer
+      v-model="rightValue"
       style="text-align: left; display: inline-block"
-      v-model="value4"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -118,20 +123,27 @@
         noChecked: '${total}',
         hasChecked: '${checked}/${total}'
       }"
+      :data="data"
       @change="handleChange"
-      :data="data">
-      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
-      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
-      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
+    >
+      <template #default="{option}">
+        <span>{{ option.key }} - {{ option.label }}</span>
+      </template>
+      <template #left-footer>
+        <el-button class="transfer-footer" size="small">操作</el-button>
+      </template>
+      <template #right-footer>
+        <el-button class="transfer-footer" size="small">操作</el-button>
+      </template>
     </el-transfer>
   </div>
 </template>
 
 <style>
-  .transfer-footer {
-    margin-left: 20px;
-    padding: 6px 5px;
-  }
+.transfer-footer {
+  margin-left: 20px;
+  padding: 6px 5px;
+}
 </style>
 
 <script>
@@ -150,8 +162,8 @@
       };
       return {
         data: generateData(),
-        value: [1],
-        value4: [1],
+        leftValue: [1],
+        rightValue: [1],
         renderFunc(h, option) {
           return h("span", null, option.key, " - ", option.label);
         }
@@ -180,8 +192,8 @@
       key: 'value',
       label: 'desc'
     }"
-    :data="data">
-  </el-transfer>
+    :data="data"
+  />
 </template>
 
 <script>