docs(base-select): add filterable tree demo

examples/sites/demos/pc/app/base-select/slot-panel-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <p>场景1：下拉树单选</p>
+  <div>场景1：下拉树单选</div>
   <tiny-base-select v-model="value">
     <template #panel="{ props: { state }, methods: { updateModelValue } }">
       <tiny-tree
@@ -19,8 +19,8 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
-  <p>场景2：下拉树多选</p>
-  <tiny-base-select v-model="value2" :multiple="true">
+  <div>场景2：下拉树多选</div>
+  <tiny-base-select v-model="value2" multiple>
     <template #panel="{ props: { state }, methods: { updateModelValue } }">
       <tiny-tree
         :data="treeData"
@@ -44,6 +44,28 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
+  <div>场景3：下拉树可搜索</div>
+  <tiny-base-select v-model="value3" filterable clearable :filter-method="filterMethod">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        ref="treeRef"
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        :filter-node-method="filter"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
 </template>
 
 <script setup>
@@ -52,6 +74,9 @@ import { BaseSelect as TinyBaseSelect, Tree as TinyTree } from '@opentiny/vue'
 
 const value = ref()
 const value2 = ref([])
+const value3 = ref()
+
+const treeRef = ref()
 
 const treeData = ref([
   {
@@ -89,6 +114,16 @@ const treeData = ref([
     ]
   }
 ])
+
+const filterMethod = (value) => {
+  treeRef.value.filter(value)
+}
+
+const filter = (value, data) => {
+  if (!value) return true
+
+  return data.label.includes(value)
+}
 </script>
 
 <style scoped>

examples/sites/demos/pc/app/base-select/slot-panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <p>场景1：下拉树单选</p>
+  <div>场景1：下拉树单选</div>
   <tiny-base-select v-model="value">
     <template #panel="{ props: { state }, methods: { updateModelValue } }">
       <tiny-tree
@@ -19,8 +19,8 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
-  <p>场景2：下拉树多选</p>
-  <tiny-base-select v-model="value2" :multiple="true">
+  <div>场景2：下拉树多选</div>
+  <tiny-base-select v-model="value2" multiple>
     <template #panel="{ props: { state }, methods: { updateModelValue } }">
       <tiny-tree
         :data="treeData"
@@ -44,6 +44,28 @@
       ></tiny-tree>
     </template>
   </tiny-base-select>
+  <div>场景3：下拉树可搜索</div>
+  <tiny-base-select v-model="value3" filterable clearable :filter-method="filterMethod">
+    <template #panel="{ props: { state }, methods: { updateModelValue } }">
+      <tiny-tree
+        ref="treeRef"
+        :data="treeData"
+        :expand-on-click-node="false"
+        :icon-trigger-click-node="false"
+        :default-expand-all="true"
+        :filter-node-method="filter"
+        @node-click="
+          (data) => {
+            state.visible = false
+            updateModelValue(data.id)
+            nextTick(() => {
+              state.selectedLabel = data.label
+            })
+          }
+        "
+      ></tiny-tree>
+    </template>
+  </tiny-base-select>
 </template>
 
 <script>
@@ -95,6 +117,16 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    filterMethod(value) {
+      this.$refs.treeRef.filter(value)
+    },
+    filter(value, data) {
+      if (!value) return true
+
+      return data.label.includes(value)
+    }
   }
 }
 </script>