element-ui的Tree树形控件触发指定节点点击处理

项目需求

有个多路搜索框（从服务器搜索），可支持同时根据关键字搜索科室和医生，页面左侧是科室树，右侧是医生列表表格，当选择关键字搜索结果的某个科室（可获取到科室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