热门搜索排除空值

admin/src/components/material/index.vue

@@ -219,7 +219,7 @@
                                     size="default"
                                     :value="item.name"
                                     width="400px"
-                                    :limit="20"
+                                    :limit="50"
                                     show-limit
                                     teleported
                                 >
@@ -269,7 +269,7 @@
                                     size="default"
                                     :value="row.name"
                                     width="400px"
-                                    :limit="20"
+                                    :limit="50"
                                     show-limit
                                     teleported
                                 >

admin/src/views/setting/search/index.vue

@@ -27,7 +27,13 @@
                     <el-table size="large" :data="formData.list">
                         <el-table-column label="关键词" prop="describe" min-width="200">
                             <template #default="{ row }">
-                                <el-input v-model="row.name" clearable maxlength="30" />
+                                <el-input
+                                    v-model.trim="row.name"
+                                    clearable
+                                    placeholder="请输入关键字"
+                                    show-word-limit
+                                    maxlength="30"
+                                />
                             </template>
                         </el-table-column>
                         <el-table-column label="排序" prop="describe" min-width="80">
@@ -92,7 +98,7 @@ const formData = reactive<Search>({
 })
 
 const list = computed(() => {
-    return [...formData.list].sort((v1, v2) => v2.sort - v1.sort)
+    return formData.list.filter((item) => item.name).sort((v1, v2) => v2.sort - v1.sort)
 })
 
 // 获取登录注册数据
@@ -110,7 +116,7 @@ const getData = async () => {
 
 const handleAdd = () => {
     formData.list.push({
-        name: '关键字',
+        name: '',
         sort: 0
     })
 }

app/src/pages/search/component/suggest.vue

@@ -1,23 +1,21 @@
 <template>
     <view class="suggest bg-white">
         <!-- 热门搜索 -->
-        <view class="hot" v-if="hot_search.length">
+        <view class="hot" v-if="searchData.length">
             <view class="font-medium pl-[24rpx] pt-[26rpx] pb-[6rpx] text-lg">热门搜索</view>
 
             <view class="w-full px-[24rpx]">
-                <block v-for="(hotItem, index) in hot_search" :key="index">
+                <block v-for="(hotItem, index) in searchData" :key="index">
-                    <view
+                    <view class="keyword truncate max-w-full" @click="handleHistoreSearch(hotItem)">
-                        class="keyword truncate max-w-full"
+                        {{ hotItem }}
-                        @click="handleHistoreSearch(hotItem)"
+                    </view>
-                        >{{ hotItem }}</view
-                    >
                 </block>
             </view>
         </view>
 
         <view
             class="mx-[24rpx] my-[40rpx] border-b border-solid border-0 border-light"
-            v-if="hot_search.length && his_search.length"
+            v-if="searchData.length && his_search.length"
         ></view>
 
         <!-- 历史搜索 -->
@@ -39,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue'
+import { computed } from 'vue'
 
 const emit = defineEmits<{
     (event: 'search', value: string): void
@@ -52,10 +50,13 @@ const props = withDefaults(
         his_search?: string[]
     }>(),
     {
-        hot_search: [],
+        hot_search: () => [],
-        his_search: []
+        his_search: () => []
     }
 )
+const searchData = computed(() => {
+    return props.hot_search.filter((item) => item)
+})
 
 const handleHistoreSearch = (text: string) => {
     emit('search', text)