项目需求
有个多路搜索框(从服务器搜索),可支持同时根据关键字搜索科室和医生,页面左侧是科室树,右侧是医生列表表格,当选择关键字搜索结果的某个科室(可获取到科室id),需要触发选中左侧的科室节点,并查询出相应的科室所有医生信息。所以这个不适合直接采用element-ui的节点过滤搜索框来过滤节点,而element-ui也没有直接根据tree节点值触发节点点击的事件,所以需要额外写代码来实现这个交互效果。
效果图
主要实现代码
<template>
<el-select
class="searchInput"
v-model="selectedSearchItem"
filterable
remote
reserve-keyword
size="mini"
placeholder="搜索成员或科室"
:remote-method="queryDeptOrDoctor"
@change="selectSearchItem"
:loading="searchLoading">
<el-option-group
v-for="group in searchOptionGroups"
:key="group.name"
:label="group.name">
<el-option
v-for="item in group.options"
:key="item.id"
:label=