标签管理修改无数据也可以回车创建

src/components/Course/courseTag.vue

@@ -15,6 +15,8 @@
       @remove-tag="handleTagRemove"
       @change="handleSelectionChange"
       @keyup.enter.native="handleEnterKey"
+      @keyup.delete.native="handleDeleteKey"
+      ref="tagSelect"
     >
       <el-option
         v-for="item in searchResults"
@@ -113,36 +115,29 @@ export default {
       this.loading = false;
       this.params = {};
     },
-    // 修改doSearch方法，添加搜索结果为空时的提示
-    async doSearch(query) {
-      if (!query.trim()) {
-        this.searchResults = []
-        return
-      }
-
-      this.loading = true
-      try {
-        const {result:tags} = await apiCourseTag.searchTags({tagName:query})
-        tags.forEach(item => {
-          this.tagMap.set(item.id, item)
-        })
-        this.searchResults = tags
-        // 当搜索结果为空时，提示用户可以按回车键创建标签
-        if (tags.length === 0) {
-          this.$message.info('无此标签，按回车键创建')
-        }
-      } finally {
-        this.loading = false
-      }
-    },
     handleTagRemove(tagId) {
       this.selectedTags = this.selectedTags.filter(id => id !== tagId)
       this.$emit('change', this.displayTags)
+      // 清空输入框内容
+      if (this.$refs.tagSelect) {
+        const input = this.$refs.tagSelect.$refs.input
+        if (input) {
+          input.value = ''
+        }
+      }
     },
     removeTag(tagId) {
       this.handleTagRemove(tagId)
     },
 
+    // 新增：处理删除键事件
+    handleDeleteKey(event) {
+      // 如果输入框内容为空，不执行任何搜索
+      if (!event.target.value.trim()) {
+        this.searchResults = []
+      }
+    },
+
     //按回车键，创建新标签
     handleEnterKey(event) {
       const inputVal = event.target.value?.trim()
@@ -155,6 +150,13 @@ export default {
     // 新增：处理选择变化事件
     handleSelectionChange() {
       this.$emit('change', this.displayTags)
+      // 选择标签后清空输入框
+      if (this.$refs.tagSelect) {
+        const input = this.$refs.tagSelect.$refs.input
+        if (input) {
+          input.value = ''
+        }
+      }
     },
     //创建新标签
     async createNewTag(tagName) {
@@ -187,6 +189,28 @@ export default {
         this.loading = false
       }
     },
+    // 修改doSearch方法，添加搜索结果为空时的提示
+    async doSearch(query) {
+      if (!query.trim()) {
+        this.searchResults = []
+        return
+      }
+
+      this.loading = true
+      try {
+        const {result:tags} = await apiCourseTag.searchTags({tagName:query})
+        tags.forEach(item => {
+          this.tagMap.set(item.id, item)
+        })
+        this.searchResults = tags
+        // 当搜索结果为空时，提示用户可以按回车键创建标签
+        if (tags.length === 0) {
+          this.$message.info('无此标签，按回车键创建')
+        }
+      } finally {
+        this.loading = false
+      }
+    }
   }
 }
 </script>