游戏搜索选择

src/components/game-select/index.vue

@@ -9,8 +9,11 @@
     :fieldNames="{ title: 'name', key: 'id' }"
     allow-search
     allow-clear
+    :filter-tree-node="filterTreeNode"
     :treeProps="{
       defaultExpandedKeys: [],
+      expandedKeys: expandedKeys,
+      onExpand: expandTreeNode,
     }"
     placeholder="游戏"
   />
@@ -31,6 +34,7 @@ const props = defineProps({
   },
 });
 
+const expandedKeys = ref([]);
 const emit = defineEmits(["update:modelValue", "change"]);
 const onUpdate = (val) => {
   emit("update:modelValue", val);
@@ -55,6 +59,22 @@ const fetchGameList = async () => {
     });
   }
 };
+const filterTreeNode = (inputText, node) => {
+  if (inputText) {
+    const filterData =
+      node.name.toLowerCase().indexOf(inputText.toLowerCase()) > -1;
+    if (filterData) {
+      if (!expandedKeys.value.includes(node.parent_id)) {
+        expandedKeys.value.push(node.parent_id);
+      }
+      console.log(node);
+    }
+    return filterData;
+  }
+};
 
+const expandTreeNode = (expandKeys) => {
+  expandedKeys.value = expandKeys;
+};
 onMounted(fetchGameList);
 </script>