项目需求
有个多路搜索框（从服务器搜索），可支持同时根据关键字搜索科室和医生，页面左侧是科室树，右侧是医生列表表格，当选择关键字搜索结果的某个科室（可获取到科室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="item.name"
:value="item.id">
</el-option>
</el-option-group>
</el-select>
<el-tree class="deptTreeCntr"
ref="deptTree"
:data="treeData"
:props="treeProps"
node-key="id"
:default-expanded-keys="['0']"
:expand-on-click-node="false"
@node-click="handleTreeNodeClick">
</el-tree>
</template>
<script>
export default {
data () {
return {
selectedSearchItem: '',
searchLoading: false,
searchOptionGroups: [],
treeData: [],
treeProps: {
value: 'id',
children: 'children',
label: 'title'
},
}
},
methods: {
// 根据关键字搜索科室或医生
queryDeptOrDoctor(keyword){
this.searchOptionGroups = [];
if(keyword == ''){
return;
}
this.searchLoading = true;
// 发起服务器查询，并组装this.searchOptionGroups数据
// ...
this.searchLoading = false;
},
// 多路搜索框选择了搜索的item处理
selectSearchItem(selectedVal){
// selectedVal的前缀用于区分是科室还是医生，科室是“dept-”开头，医生是“doct-”开头
let type = selectedVal.substring(0, 4);
// 截取实际的科室id或者医生id
let val = selectedVal.substring(5);
if(type == 'dept') {// 科室
// 设置当前选中key
this.$refs.deptTree.setCurrentKey(val);
// 根据el-tree的getNode方法获取到val相应的Node
let node = this.$refs.deptTree.getNode(val);
// 触发点击处理（由于elem参数没用到，所以这里忽略不传）
this.handleTreeNodeClick(node.data, node);
// 除了选中相应的科室节点及触发查询，还有件事要做：就是有可能这个节点处于树比较深的位置，那应该把这个节点的所有父节点都展开（默认不展开）
// 获取自身及所有父节点的id
let selfAndParentIdArr = this.findTreeParentDataAttr(node, 'id');
if(selfAndParentIdArr.length > 1){
// 这里只展开所有父节点，当前节点不处理
for(let i = 0; i < selfAndParentIdArr.length - 1; i++){
// 这里通过设置节点数据的expanded属性来展开指定节点
this.$refs.deptTree.store.nodesMap[selfAndParentIdArr[i]].expanded = true;
}
}
}else if(type == 'doct') {// 医生
// 触发查询指定医生的处理...
}
},
// 点击树节点事件处理
handleTreeNodeClick(data, node, elem){
// data.id即为科室id，根据这个科室id触发医生表格数据的查询...
},
// 递归找出选择科室及所有上级科室的data指定属性（如title、id）
findTreeParentDataAttr(node, attrName, parentNameArr){
if(!parentNameArr){
parentNameArr = [];
}
// 因为是一层一层往上找，这里把父节点放最前面
parentNameArr.unshift(node.data[attrName]);
if(node.data.id == '0'){// 根节点
}else{
this.findTreeParentDataAttr(node.parent, attrName, parentNameArr);
}
// 返回找到的所有节点名称
return parentNameArr;
}
}
}
</script>
一些属性、方法说明
el-tree：
data =》 tree的展示数据，类型：array，需要在后端封装好
props =》 配置选项，类型：object。这个主要用于匹配tree相应节点属性和后端返回数据的属性
label：指定节点标签（即显示的节点文本）为节点对象的某个属性值
children：指定子树为节点对象的某个属性值
node-key =》 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
default-expanded-keys =》 默认展开的节点的 key 的数组，由于科室树都有个默认的根节点id为0，所以这里会默认展开根节点下的一级节点
expand-on-click-node =》 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
node-click =》 节点被点击时的回调。共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
setCurrentKey =》 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
getNode =》 根据 data 或者 key 拿到 Tree 组件中的 node