elementUI select+tree 模糊查询+过滤组织+联动

在使用Element UI的Select组件结合Tree组件进行模糊查询、筛选组织并实现联动时，可以通过以下步骤实现：

1. 使用Select组件作为下拉输入框。
2. 使用Tree组件展示组织结构，并结合模糊搜索功能。
3. 通过监听Select的输入事件或Tree的节点点击事件来实现联动效果。

以下是一个简化的实现示例：

<template>
  <el-row>
    <el-col :span="12">
      <el-select
        v-model="selectedOrg"
        filterable
        remote
        placeholder="请选择组织"
        :remote-method="searchOrg"
        @change="handleOrgChange"
      >
        <el-option
          v-for="org in orgList"
          :key="org.id"
          :label="org.name"
          :value="org.id"
        ></el-option>
      </el-select>
    </el-col>
    <el-col :span="12">
      <el-tree
        :data="orgTree"
        :props="defaultProps"
        :filter-node-method="filterOrgTree"
        @node-click="handleNodeClick"
      ></el-tree>
    </el-col>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOrg: null,
      orgList: [],
      orgTree: [
        // 组织树结构数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      filterText: ''
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    searchOrg(query) {
      // 模糊查询逻辑，可以调用API或者本地搜索
      this.orgList = this.orgTree.filter(org => org.name.includes(query));
    },
    filterOrgTree(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleOrgChange(orgId) {
      // 当选择组织时，联动Tree展开相应节点
      this.$refs.tree.setCurrentKey(orgId);
    },
    handleNodeClick(data) {
      // 当点击Tree节点时，联动Select选择节点对应的组织
      this.selectedOrg = data.id;
    }
  }
};
</script>

在这个示例中，Select组件通过filterable属性开启模糊查询，remote-method属性用于指定远程搜索方法。Tree组件通过filter-node-method属性指定节点过滤方法。通过监听Select的change事件和Tree的node-click事件，可以实现两者之间的联动。