elementui树状搜素

您可以使用Element UI的Tree组件来实现树状搜索。以下是一个基本的示例代码：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input>
    <el-tree :data="treeData" :filter-node-method="filterNode" :default-expanded-keys="[defaultExpandedKey]">
      <span class="custom-tree-node" slot-scope="{ node, data }">{{ data.label }}</span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '', // 搜索关键字
      defaultExpandedKey: '1', // 默认展开的节点
      treeData: [
        {
          id: '1',
          label: 'Node 1',
          children: [
            {
              id: '1-1',
              label: 'Node 1-1'
            },
            {
              id: '1-2',
              label: 'Node 1-2'
            }
          ]
        },
        {
          id: '2',
          label: 'Node 2',
          children: [
            {
              id: '2-1',
              label: 'Node 2-1'
            },
            {
              id: '2-2',
              label: 'Node 2-2'
            }
          ]
        }
      ]
    };
  },
  methods: {
    filterNode(value, data) {
      // 如果搜索关键字为空，显示所有节点
      if (!value) {
        return true;
      }
      // 如果节点的标签中包含搜索关键字，显示该节点
      if (data.label.includes(value)) {
        return true;
      }
      // 遍历子节点
      for (let i = 0, len = data.children.length; i < len; i++) {
        if (this.filterNode(value, data.children[i])) {
          return true;
        }
      }
      return false;
    }
  }
};
</script>

在上面的示例中，我们使用了`<el-input>`组件作为搜索框，通过`v-model`指令绑定了`searchText`属性，用于实时获取用户输入的搜索关键字。然后，在`<el-tree>`组件中，我们使用了`filter-node-method`属性来指定一个方法`filterNode`来过滤节点。

在`filterNode`方法中，我们首先检查搜索关键字是否为空，如果为空，则返回`true`，显示所有节点。如果搜索关键字不为空，则判断节点的标签是否包含搜索关键字，如果包含，则返回`true`，显示该节点。如果节点的标签不包含搜索关键字，则递归调用`filterNode`方法遍历子节点，查找是否有符合条件的节点。最后，如果都没有找到符合条件的节点，则返回`false`，该节点将被隐藏。

以上是一个简单的实现，您可以根据自己的需求进行调整和扩展。希望对您有帮助！