vue3加ts <el-tree 模糊搜索

Vue 3 结合 TypeScript 使用 VuePress 的 `<el-tree>` 实现模糊搜索功能通常需要以下几个步骤：

1. 安装依赖：首先确保已安装 Vue、Element UI 和 TypeScript。如果还没有安装，可以在终端或命令提示符中运行：

   npm install vue@next element-ui typescript ts-loader vue-tsc @vue/cli-plugin-typescript --save-dev

2. 配置 TypeScript：更新 `vue.config.js` 文件，启用 TypeScript 支持：

   module.exports = {
     transpileDependencies: ['element-ui'],
     chainWebpack(config) {
       config.module.rule('typescript')
         .test(/\.tsx?$/)
         .use('ts-loader')
         .loader('ts-loader');
     },
     // ...其他配置
   };

3. 创建组件：创建一个新的 Vue 组件，例如 `SearchableTree.vue`，并导入 Element UI 的 Tree 组件，并添加 TypeScript 类型声明：

   import { ElTree } from 'element-ui';
   
   interface Node {
     label: string;
     children?: Node[];
   }
   
   export default {
     components: {
       ElTree as SearchableElTree,
     },
     props: {
       data: Array<Node>,
     },
     methods: {
       search(query: string): void {
         // 搜索逻辑，可以遍历节点，过滤出包含 query 的节点
       },
     },
   } as DefineComponent<{
     data: readonly Node[];
   }>;

4. 使用组件：在模板中使用 `<searchable-el-tree>` 标签，传入数据源和处理模糊搜索的方法：

   <template>
     <el-tree
       :data="data"
       ref="treeRef"
       node-key="label"
       @input="handleSearch"
       placeholder="请输入关键字搜索">
     </el-tree>
   </template>

   <script lang="ts">
   import SearchableElTree from './SearchableTree.vue';

   // ...

   export default {
     components: {
       SearchableElTree,
     },
     setup() {
       const treeRef = ref<ElTree>();
       const [query, setQuery] = useState<string>('');

       function handleSearch(node: any) {
         if (node.label.includes(query)) {
           // 更新树的状态显示搜索结果
         }
       }

       return {
         treeRef,
         query,
         setQuery,
         handleSearch,
       };
     },
   };
   </script>

5. 监听输入变化：在 `handleSearch` 中监听用户输入的变化，触发搜索操作。