vue3前端查询，查询name和code字段, 不同的输入框查询，点击查询按钮的时候，可以模糊查询，返回其节点，包括父节点, 展现形式为 el-table树形格式

在 Vue3 中，实现这样的功能通常会结合 Element UI 的表格（el-table）和搜索组件，以及自定义事件或者表单验证。以下是基本步骤：

1. 安装依赖：首先需要安装 `element-ui` 和相应的库（如 `vue-filters` 或者 `vue-query` 等用于模糊查询的插件）。

npm install element-ui vue-filters

2. 创建数据结构：设计一个包含 `name` 和 `code` 字段的对象数组作为数据源，同时添加一个虚拟属性 `searchable` 来支持模糊查询。

data() {
  return {
    dataSource: [
      { name: 'Item1', code: 'A001', searchable: this.formatSearch('Item1') },
      // ... 其他数据项
    ],
    searchKeyword: '',
  };
},
methods: {
  formatSearch(item) {
    return item.toLowerCase().includes(this.searchKeyword.toLowerCase());
  }
}

3. 使用模板：在 `el-table` 中设置列和搜索框，并监听搜索框的变化。

<template>
  <el-form :model="searchKeyword" size="small">
    <el-input v-model.trim="searchKeyword" placeholder="请输入名称或代码进行模糊查询"></el-input>
    <el-button type="primary" @click="search">查询</el-button>
  </el-form>
  <el-table
    :data="filteredDataSource"
    tree
    :key="item => item.id" <!-- 假设id是每个节点唯一标识 -->
    highlight-current-row
  >
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="code" label="代码"></el-table-column>
  </el-table>
</template>

4. 搜索方法：在 `search` 方法中更新 `filteredDataSource` 以过滤出匹配搜索关键字的数据，这里可以使用 `vue-filter` 插件来进行模糊匹配。

methods: {
  async search() {
    if (this.searchKeyword === '') {
      this.filteredDataSource = this.dataSource;
    } else {
      const filteredData = this.dataSource.filter(this.formatSearch);
      this.filteredDataSource = this.transformToTree(filteredData);
    }
  },
  transformToTree(data) { /* 这里需要你自己实现将扁平化的数组转换成树形结构 */}
}

5. 树形结构转换：你需要编写 `transformToTree` 函数，使用递归或者其他数据处理技术来构建树形数据结构，以便在表格中展示父节点。

注意这只是一个基础示例，实际应用可能还需要考虑更多细节，比如错误处理、性能优化等。