diff --git a/docs/components.d.ts b/docs/components.d.ts
index 7ac5da590a..ef28b33d28 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -1,6 +1,6 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/vue-next/pull/3399
+// Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
diff --git a/docs/examples/config-provider/usage.vue b/docs/examples/config-provider/usage.vue
index 281824ee8d..9fe5e75fb6 100644
--- a/docs/examples/config-provider/usage.vue
+++ b/docs/examples/config-provider/usage.vue
@@ -1,37 +1,24 @@
 <template>
   <div>
-    <el-button m="b-2" @click="toggle"> Switch Lang </el-button>
+    <el-button mb-2 @click="toggle">Switch Language</el-button>
     <br />
-    <el-config-provider :locale="locale2">
-      <el-color-picker :model-value="''" style="vertical-align: middle" />
+
+    <el-config-provider :locale="locale">
+      <el-table mb-1 :data="[]" />
+      <el-pagination :total="100" />
     </el-config-provider>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import en from 'element-plus/dist/locale/en.mjs'
+
+const language = ref('zh-cn')
+const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
 
-const locale1 = ref({
-  name: 'zh-cn',
-  el: {
-    colorpicker: {
-      confirm: '确定',
-      clear: '清空',
-    },
-  },
-})
-const locale2 = ref({
-  name: 'en',
-  el: {
-    colorpicker: {
-      confirm: 'Confirm',
-      clear: 'Clear',
-    },
-  },
-})
 const toggle = () => {
-  const temp = locale1.value
-  locale1.value = locale2.value
-  locale2.value = temp
+  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
 }
 </script>