自动完成控件

src/views/tools/TestPage.vue

@@ -1,35 +1,38 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useDefaultPage } from '@/config'
 import { loadUsersResult } from '@/services/user/UserService'
+import { $i18nMsg } from '@/messages'
 
 const modelIcon = ref('Apple')
 const modelAuto = ref('99999')
 const modelAutoLabel = ref('Gary Fu')
 const autoPage = ref(useDefaultPage(8))
-const autocompleteConfig = {
-  columns: [{
-    label: '中文名',
-    property: 'nameCn'
-  }, {
-    label: '性别',
-    property: 'gender',
-    slot: 'gender'
-  }, {
-    label: '地址',
-    property: 'address'
-  }],
-  searchMethod (query, cb) {
-    loadUsersResult({ page: autoPage.value })
-      .then(result => {
-        const data = {
-          page: result.resultData.page,
-          items: result.resultData.userList
-        }
-        cb(data)
-      })
+const autocompleteConfig = computed(() => {
+  return {
+    columns: [{
+      label: $i18nMsg('姓名', 'Name'),
+      property: $i18nMsg('nameCn', 'nameEn')
+    }, {
+      label: $i18nMsg('性别', 'Gender'),
+      property: 'gender',
+      slot: 'gender'
+    }, {
+      label: $i18nMsg('地址', 'Address'),
+      property: 'address'
+    }],
+    searchMethod (query, cb) {
+      loadUsersResult({ page: autoPage.value })
+        .then(result => {
+          const data = {
+            page: result.resultData.page,
+            items: result.resultData.userList
+          }
+          cb(data)
+        })
+    }
   }
-}
+})
 </script>
 
 <template>
@@ -46,7 +49,7 @@ const autocompleteConfig = {
             v-model:page="autoPage"
             id-key="id"
             :label-key="$i18nMsg('nameCn', 'nameEn')"
-            empty-search-enabled
+            :empty-search-enabled="false"
             title="请选择用户"
             :autocomplete-config="autocompleteConfig"
           >