From f8ca913a1df0acbf0176eb14d9f12abfe3bb4829 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Mon, 4 Mar 2024 22:06:40 +0800
Subject: [PATCH] fix(components): fix deprecated warning (#16034)

---
 docs/examples/checkbox/button-style.vue       | 28 +++++--------------
 docs/examples/date-picker/date-range.vue      |  6 ++--
 docs/examples/date-picker/enter-date.vue      |  6 ++--
 docs/examples/descriptions/sizes.vue          |  8 +++---
 docs/examples/descriptions/vertical-list.vue  |  8 +++---
 docs/examples/drawer/basic-usage.vue          | 12 ++++----
 docs/examples/form/alignment.vue              |  6 ++--
 docs/examples/form/basic-form.vue             | 20 +++++++++----
 docs/examples/form/size-control.vue           | 24 +++++++++-------
 docs/examples/form/validation.vue             | 20 +++++++++----
 docs/examples/menu/collapse.vue               |  4 +--
 docs/examples/pagination/more-elements.vue    |  4 +--
 docs/examples/space/control-size.vue          |  6 ++--
 docs/examples/space/fill-ratio.vue            |  4 +--
 docs/examples/table/table-layout.vue          |  4 +--
 docs/examples/tabs/tab-position.vue           |  8 +++---
 .../components/table/__tests__/table.test.ts  |  4 +--
 .../components/table/src/filter-panel.vue     |  2 +-
 .../transfer/src/transfer-panel.vue           |  2 +-
 ssr-testing/cases/radio.vue                   | 16 +++++------
 20 files changed, 99 insertions(+), 93 deletions(-)

diff --git a/docs/examples/checkbox/button-style.vue b/docs/examples/checkbox/button-style.vue
index 03dac54e6d..c4dbd57e71 100644
--- a/docs/examples/checkbox/button-style.vue
+++ b/docs/examples/checkbox/button-style.vue
@@ -1,25 +1,16 @@
 <template>
   <div>
     <el-checkbox-group v-model="checkboxGroup1" size="large">
-      <el-checkbox-button
-        v-for="city in cities"
-        :key="city"
-        :label="city"
-        :value="city"
-      >
+      <el-checkbox-button v-for="city in cities" :key="city" :value="city">
         {{ city }}
       </el-checkbox-button>
     </el-checkbox-group>
   </div>
   <div class="demo-button-style">
     <el-checkbox-group v-model="checkboxGroup2">
-      <el-checkbox-button
-        v-for="city in cities"
-        :key="city"
-        :label="city"
-        :value="city"
-        >{{ city }}</el-checkbox-button
-      >
+      <el-checkbox-button v-for="city in cities" :key="city" :value="city">{{
+        city
+      }}</el-checkbox-button>
     </el-checkbox-group>
   </div>
   <div class="demo-button-style">
@@ -27,7 +18,6 @@
       <el-checkbox-button
         v-for="city in cities"
         :key="city"
-        :label="city"
         :value="city"
         :disabled="city === 'Beijing'"
         >{{ city }}</el-checkbox-button
@@ -36,13 +26,9 @@
   </div>
   <div class="demo-button-style">
     <el-checkbox-group v-model="checkboxGroup4" size="small" disabled>
-      <el-checkbox-button
-        v-for="city in cities"
-        :key="city"
-        :label="city"
-        :value="city"
-        >{{ city }}</el-checkbox-button
-      >
+      <el-checkbox-button v-for="city in cities" :key="city" :value="city">{{
+        city
+      }}</el-checkbox-button>
     </el-checkbox-group>
   </div>
 </template>
diff --git a/docs/examples/date-picker/date-range.vue b/docs/examples/date-picker/date-range.vue
index ea830a2e89..8dfe6b9089 100644
--- a/docs/examples/date-picker/date-range.vue
+++ b/docs/examples/date-picker/date-range.vue
@@ -1,8 +1,8 @@
 <template>
   <el-radio-group v-model="size" label="size control">
-    <el-radio-button label="large">large</el-radio-button>
-    <el-radio-button label="default">default</el-radio-button>
-    <el-radio-button label="small">small</el-radio-button>
+    <el-radio-button value="large">large</el-radio-button>
+    <el-radio-button value="default">default</el-radio-button>
+    <el-radio-button value="small">small</el-radio-button>
   </el-radio-group>
   <div class="demo-date-picker">
     <div class="block">
diff --git a/docs/examples/date-picker/enter-date.vue b/docs/examples/date-picker/enter-date.vue
index e980df8798..85487b99a9 100644
--- a/docs/examples/date-picker/enter-date.vue
+++ b/docs/examples/date-picker/enter-date.vue
@@ -1,8 +1,8 @@
 <template>
   <el-radio-group v-model="size" label="size control">
-    <el-radio-button label="large">large</el-radio-button>
-    <el-radio-button label="default">default</el-radio-button>
-    <el-radio-button label="small">small</el-radio-button>
+    <el-radio-button value="large">large</el-radio-button>
+    <el-radio-button value="default">default</el-radio-button>
+    <el-radio-button value="small">small</el-radio-button>
   </el-radio-group>
   <div class="demo-date-picker">
     <div class="block">
diff --git a/docs/examples/descriptions/sizes.vue b/docs/examples/descriptions/sizes.vue
index 8b1f51fb1c..a39ab7ff3c 100644
--- a/docs/examples/descriptions/sizes.vue
+++ b/docs/examples/descriptions/sizes.vue
@@ -1,8 +1,8 @@
 <template>
   <el-radio-group v-model="size">
-    <el-radio label="large">Large</el-radio>
-    <el-radio>Default</el-radio>
-    <el-radio label="small">Small</el-radio>
+    <el-radio value="large">Large</el-radio>
+    <el-radio value="default">Default</el-radio>
+    <el-radio value="small">Small</el-radio>
   </el-radio-group>
 
   <el-descriptions
@@ -104,7 +104,7 @@ import {
   User,
 } from '@element-plus/icons-vue'
 
-const size = ref('')
+const size = ref('default')
 const iconStyle = computed(() => {
   const marginMap = {
     large: '8px',
diff --git a/docs/examples/descriptions/vertical-list.vue b/docs/examples/descriptions/vertical-list.vue
index 5d716c1c47..f20101adc8 100644
--- a/docs/examples/descriptions/vertical-list.vue
+++ b/docs/examples/descriptions/vertical-list.vue
@@ -1,8 +1,8 @@
 <template>
   <el-radio-group v-model="size">
-    <el-radio label="large">Large</el-radio>
-    <el-radio>Default</el-radio>
-    <el-radio label="small">Small</el-radio>
+    <el-radio value="large">Large</el-radio>
+    <el-radio value="default">Default</el-radio>
+    <el-radio value="small">Small</el-radio>
   </el-radio-group>
 
   <el-descriptions
@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-const size = ref('')
+const size = ref('default')
 const blockMargin = computed(() => {
   const marginMap = {
     large: '32px',
diff --git a/docs/examples/drawer/basic-usage.vue b/docs/examples/drawer/basic-usage.vue
index 74f5300381..9314c550c3 100644
--- a/docs/examples/drawer/basic-usage.vue
+++ b/docs/examples/drawer/basic-usage.vue
@@ -1,9 +1,9 @@
 <template>
   <el-radio-group v-model="direction">
-    <el-radio label="ltr">left to right</el-radio>
-    <el-radio label="rtl">right to left</el-radio>
-    <el-radio label="ttb">top to bottom</el-radio>
-    <el-radio label="btt">bottom to top</el-radio>
+    <el-radio value="ltr">left to right</el-radio>
+    <el-radio value="rtl">right to left</el-radio>
+    <el-radio value="ttb">top to bottom</el-radio>
+    <el-radio value="btt">bottom to top</el-radio>
   </el-radio-group>
 
   <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
@@ -27,10 +27,10 @@
     </template>
     <template #default>
       <div>
-        <el-radio v-model="radio1" label="Option 1" size="large"
+        <el-radio v-model="radio1" value="Option 1" size="large"
           >Option 1</el-radio
         >
-        <el-radio v-model="radio1" label="Option 2" size="large"
+        <el-radio v-model="radio1" value="Option 2" size="large"
           >Option 2</el-radio
         >
       </div>
diff --git a/docs/examples/form/alignment.vue b/docs/examples/form/alignment.vue
index 88b51043ac..364f2cdf76 100644
--- a/docs/examples/form/alignment.vue
+++ b/docs/examples/form/alignment.vue
@@ -1,8 +1,8 @@
 <template>
   <el-radio-group v-model="labelPosition" label="label position">
-    <el-radio-button label="left">Left</el-radio-button>
-    <el-radio-button label="right">Right</el-radio-button>
-    <el-radio-button label="top">Top</el-radio-button>
+    <el-radio-button value="left">Left</el-radio-button>
+    <el-radio-button value="right">Right</el-radio-button>
+    <el-radio-button value="top">Top</el-radio-button>
   </el-radio-group>
   <div style="margin: 20px" />
   <el-form
diff --git a/docs/examples/form/basic-form.vue b/docs/examples/form/basic-form.vue
index c38f3cce48..c4f86010c4 100644
--- a/docs/examples/form/basic-form.vue
+++ b/docs/examples/form/basic-form.vue
@@ -34,16 +34,24 @@
     </el-form-item>
     <el-form-item label="Activity type">
       <el-checkbox-group v-model="form.type">
-        <el-checkbox label="Online activities" name="type" />
-        <el-checkbox label="Promotion activities" name="type" />
-        <el-checkbox label="Offline activities" name="type" />
-        <el-checkbox label="Simple brand exposure" name="type" />
+        <el-checkbox value="Online activities" name="type">
+          Online activities
+        </el-checkbox>
+        <el-checkbox value="Promotion activities" name="type">
+          Promotion activities
+        </el-checkbox>
+        <el-checkbox value="Offline activities" name="type">
+          Offline activities
+        </el-checkbox>
+        <el-checkbox value="Simple brand exposure" name="type">
+          Simple brand exposure
+        </el-checkbox>
       </el-checkbox-group>
     </el-form-item>
     <el-form-item label="Resources">
       <el-radio-group v-model="form.resource">
-        <el-radio label="Sponsor" />
-        <el-radio label="Venue" />
+        <el-radio value="Sponsor">Sponsor</el-radio>
+        <el-radio value="Venue">Venue</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="Activity form">
diff --git a/docs/examples/form/size-control.vue b/docs/examples/form/size-control.vue
index 7759612f01..a619c9f26f 100644
--- a/docs/examples/form/size-control.vue
+++ b/docs/examples/form/size-control.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <el-radio-group v-model="size" label="size control">
-      <el-radio-button label="large">large</el-radio-button>
-      <el-radio-button label="default">default</el-radio-button>
-      <el-radio-button label="small">small</el-radio-button>
+      <el-radio-button value="large">large</el-radio-button>
+      <el-radio-button value="default">default</el-radio-button>
+      <el-radio-button value="small">small</el-radio-button>
     </el-radio-group>
     <el-radio-group v-model="labelPosition" label="position control">
-      <el-radio-button label="left">Left</el-radio-button>
-      <el-radio-button label="right">Right</el-radio-button>
-      <el-radio-button label="top">Top</el-radio-button>
+      <el-radio-button value="left">Left</el-radio-button>
+      <el-radio-button value="right">Right</el-radio-button>
+      <el-radio-button value="top">Top</el-radio-button>
     </el-radio-group>
   </div>
   <br />
@@ -54,14 +54,18 @@
     </el-form-item>
     <el-form-item label="Activity type">
       <el-checkbox-group v-model="sizeForm.type">
-        <el-checkbox-button label="Online activities" name="type" />
-        <el-checkbox-button label="Promotion activities" name="type" />
+        <el-checkbox-button value="Online activities" name="type">
+          Online activities
+        </el-checkbox-button>
+        <el-checkbox-button value="Promotion activities" name="type">
+          Promotion activities
+        </el-checkbox-button>
       </el-checkbox-group>
     </el-form-item>
     <el-form-item label="Resources">
       <el-radio-group v-model="sizeForm.resource">
-        <el-radio border label="Sponsor" />
-        <el-radio border label="Venue" />
+        <el-radio border value="Sponsor">Sponsor</el-radio>
+        <el-radio border value="Venue">Venue</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item>
diff --git a/docs/examples/form/validation.vue b/docs/examples/form/validation.vue
index 40fcee0233..4e2fe1e768 100644
--- a/docs/examples/form/validation.vue
+++ b/docs/examples/form/validation.vue
@@ -56,16 +56,24 @@
     </el-form-item>
     <el-form-item label="Activity type" prop="type">
       <el-checkbox-group v-model="ruleForm.type">
-        <el-checkbox label="Online activities" name="type" />
-        <el-checkbox label="Promotion activities" name="type" />
-        <el-checkbox label="Offline activities" name="type" />
-        <el-checkbox label="Simple brand exposure" name="type" />
+        <el-checkbox value="Online activities" name="type">
+          Online activities
+        </el-checkbox>
+        <el-checkbox value="Promotion activities" name="type">
+          Promotion activities
+        </el-checkbox>
+        <el-checkbox value="Offline activities" name="type">
+          Offline activities
+        </el-checkbox>
+        <el-checkbox value="Simple brand exposure" name="type">
+          Simple brand exposure
+        </el-checkbox>
       </el-checkbox-group>
     </el-form-item>
     <el-form-item label="Resources" prop="resource">
       <el-radio-group v-model="ruleForm.resource">
-        <el-radio label="Sponsorship" />
-        <el-radio label="Venue" />
+        <el-radio value="Sponsorship">Sponsorship</el-radio>
+        <el-radio value="Venue">Venue</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="Activity form" prop="desc">
diff --git a/docs/examples/menu/collapse.vue b/docs/examples/menu/collapse.vue
index dfd1d00972..a7b316c94f 100644
--- a/docs/examples/menu/collapse.vue
+++ b/docs/examples/menu/collapse.vue
@@ -1,7 +1,7 @@
 <template>
   <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
-    <el-radio-button :label="false">expand</el-radio-button>
-    <el-radio-button :label="true">collapse</el-radio-button>
+    <el-radio-button :value="false">expand</el-radio-button>
+    <el-radio-button :value="true">collapse</el-radio-button>
   </el-radio-group>
   <el-menu
     default-active="2"
diff --git a/docs/examples/pagination/more-elements.vue b/docs/examples/pagination/more-elements.vue
index 57c8fa1419..ffcc97b00f 100644
--- a/docs/examples/pagination/more-elements.vue
+++ b/docs/examples/pagination/more-elements.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex items-center mb-4">
     <el-radio-group v-model="small" class="mr-4">
-      <el-radio-button :label="false">default</el-radio-button>
-      <el-radio-button :label="true">small</el-radio-button>
+      <el-radio-button :value="false">default</el-radio-button>
+      <el-radio-button :value="true">small</el-radio-button>
     </el-radio-group>
     <div>
       background:
diff --git a/docs/examples/space/control-size.vue b/docs/examples/space/control-size.vue
index 3711bda00d..0500ff47e4 100644
--- a/docs/examples/space/control-size.vue
+++ b/docs/examples/space/control-size.vue
@@ -1,9 +1,9 @@
 <template>
   <el-space direction="vertical" alignment="start" :size="30">
     <el-radio-group v-model="size">
-      <el-radio :label="'large'">large</el-radio>
-      <el-radio :label="'default'">default</el-radio>
-      <el-radio :label="'small'">small</el-radio>
+      <el-radio value="large">Large</el-radio>
+      <el-radio value="default">Default</el-radio>
+      <el-radio value="small">Small</el-radio>
     </el-radio-group>
 
     <el-space wrap :size="size">
diff --git a/docs/examples/space/fill-ratio.vue b/docs/examples/space/fill-ratio.vue
index e1e9ad8107..61730c6aa6 100644
--- a/docs/examples/space/fill-ratio.vue
+++ b/docs/examples/space/fill-ratio.vue
@@ -2,8 +2,8 @@
   <div>
     <div style="margin-bottom: 15px">
       direction:
-      <el-radio v-model="direction" label="horizontal">horizontal</el-radio>
-      <el-radio v-model="direction" label="vertical">vertical</el-radio>
+      <el-radio v-model="direction" value="horizontal">horizontal</el-radio>
+      <el-radio v-model="direction" value="vertical">vertical</el-radio>
     </div>
     <div style="margin-bottom: 15px">
       fillRatio:<el-slider v-model="fillRatio" />
diff --git a/docs/examples/table/table-layout.vue b/docs/examples/table/table-layout.vue
index 813adb1eb0..796c524f5e 100644
--- a/docs/examples/table/table-layout.vue
+++ b/docs/examples/table/table-layout.vue
@@ -1,7 +1,7 @@
 <template>
   <el-radio-group v-model="tableLayout">
-    <el-radio-button label="fixed" />
-    <el-radio-button label="auto" />
+    <el-radio-button value="fixed">fixed</el-radio-button>
+    <el-radio-button value="auto">auto</el-radio-button>
   </el-radio-group>
   <el-table :data="tableData" :table-layout="tableLayout">
     <el-table-column prop="date" label="Date" />
diff --git a/docs/examples/tabs/tab-position.vue b/docs/examples/tabs/tab-position.vue
index 62a9468073..292b1f813c 100644
--- a/docs/examples/tabs/tab-position.vue
+++ b/docs/examples/tabs/tab-position.vue
@@ -1,9 +1,9 @@
 <template>
   <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
-    <el-radio-button label="top">top</el-radio-button>
-    <el-radio-button label="right">right</el-radio-button>
-    <el-radio-button label="bottom">bottom</el-radio-button>
-    <el-radio-button label="left">left</el-radio-button>
+    <el-radio-button value="top">top</el-radio-button>
+    <el-radio-button value="right">right</el-radio-button>
+    <el-radio-button value="bottom">bottom</el-radio-button>
+    <el-radio-button value="left">left</el-radio-button>
   </el-radio-group>
 
   <el-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
diff --git a/packages/components/table/__tests__/table.test.ts b/packages/components/table/__tests__/table.test.ts
index 41a36bd4ef..bba2b95fd5 100644
--- a/packages/components/table/__tests__/table.test.ts
+++ b/packages/components/table/__tests__/table.test.ts
@@ -82,8 +82,8 @@ describe('Table.vue', () => {
         <el-table-column label="someLabel">
           <template #default="{ row }">
             <el-checkbox-group v-model="row.checkList">
-              <el-checkbox label="复选框 A"></el-checkbox>
-              <el-checkbox label="复选框 B"></el-checkbox>
+              <el-checkbox label="复选框 A" value="复选框 A"></el-checkbox>
+              <el-checkbox label="复选框 B" value="复选框 B"></el-checkbox>
             </el-checkbox-group>
           </template>
         </el-table-column>
diff --git a/packages/components/table/src/filter-panel.vue b/packages/components/table/src/filter-panel.vue
index d9eb28def2..fb4ecfac75 100644
--- a/packages/components/table/src/filter-panel.vue
+++ b/packages/components/table/src/filter-panel.vue
@@ -23,7 +23,7 @@
               <el-checkbox
                 v-for="filter in filters"
                 :key="filter.value"
-                :label="filter.value"
+                :value="filter.value"
               >
                 {{ filter.text }}
               </el-checkbox>
diff --git a/packages/components/transfer/src/transfer-panel.vue b/packages/components/transfer/src/transfer-panel.vue
index a55a7f4898..1d2246e4c4 100644
--- a/packages/components/transfer/src/transfer-panel.vue
+++ b/packages/components/transfer/src/transfer-panel.vue
@@ -33,7 +33,7 @@
           v-for="item in filteredData"
           :key="item[propsAlias.key]"
           :class="ns.be('panel', 'item')"
-          :label="item[propsAlias.key]"
+          :value="item[propsAlias.key]"
           :disabled="item[propsAlias.disabled]"
           :validate-event="false"
         >
diff --git a/ssr-testing/cases/radio.vue b/ssr-testing/cases/radio.vue
index 54006a720b..3d246af2f1 100644
--- a/ssr-testing/cases/radio.vue
+++ b/ssr-testing/cases/radio.vue
@@ -1,21 +1,21 @@
 <template>
   <div>
-    <el-radio v-model="radio1" label="1" size="large">Option 1</el-radio>
-    <el-radio v-model="radio1" label="2" size="large">Option 2</el-radio>
+    <el-radio v-model="radio1" value="1" size="large">Option 1</el-radio>
+    <el-radio v-model="radio1" value="2" size="large">Option 2</el-radio>
   </div>
   <div>
-    <el-radio v-model="radio2" label="1">Option 1</el-radio>
-    <el-radio v-model="radio2" label="2">Option 2</el-radio>
+    <el-radio v-model="radio2" value="1">Option 1</el-radio>
+    <el-radio v-model="radio2" value="2">Option 2</el-radio>
   </div>
   <div>
-    <el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
-    <el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
+    <el-radio v-model="radio3" value="1" size="small">Option 1</el-radio>
+    <el-radio v-model="radio3" value="2" size="small">Option 2</el-radio>
   </div>
   <div>
-    <el-radio v-model="radio3" label="1" size="small" disabled
+    <el-radio v-model="radio3" value="1" size="small" disabled
       >Option 1</el-radio
     >
-    <el-radio v-model="radio3" label="2" size="small" disabled
+    <el-radio v-model="radio3" value="2" size="small" disabled
       >Option 2</el-radio
     >
   </div>