查询 加关键字

src/components/ellipsisScroll/ellipsisScroll.vue

@@ -1,7 +1,10 @@
 <template>
-  <div ref="ellipsisScrollDom" :class="[isScroll && 'isScroll', isScroll && props.autoScroll && 'autoScroll']" class="ellipsisScroll">
-    {{ props.title }}
-  </div>
+  <div
+    ref="ellipsisScrollDom"
+    :class="[isScroll && 'isScroll', isScroll && props.autoScroll && 'autoScroll']"
+    v-html="props.title"
+    class="ellipsisScroll"
+  ></div>
 </template>
 
 <script setup lang="ts">

src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -369,7 +369,10 @@ function handleGetQuery() {
   }
   httpAjax(getMaterialQueryPage, params).then(res => {
     if (res.code === 200) {
-      musicList.value = res.data.rows
+      musicList.value = res.data.rows.map((item: any) => {
+        item.name = highlightedText(item.name, queryData.name)
+        return item
+      })
       queryData.total = res.data.total
     }
     loading.value = false
@@ -390,6 +393,16 @@ function handleFavorite(item: any) {
 function formatNumber(num: number) {
   return num >= 10000 ? (num / 10000).toFixed(1).replace(/\.0$/, "") + "万" : num.toString()
 }
+const highlightedText = (text: string, query: string) => {
+  if (!text) {
+    return ""
+  }
+  if (!query) {
+    return text
+  }
+  const regex = new RegExp(`(${queryData.name})`, "gi")
+  return text.replace(regex, '<span class="highlighted">$1</span>')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -634,6 +647,9 @@ function formatNumber(num: number) {
                     font-size: 15px;
                     color: #131415;
                     line-height: 21px;
+                    &::v-deep(.highlighted) {
+                      color: red;
+                    }
                   }
                   .info {
                     margin-top: 13px;