项目需求
有个多路搜索框(从服务器搜索),可支持同时根据关键字搜索科室和医生,页面左侧是科室树,右侧是医生列表表格,当选择关键字搜索结果的某个科室(可获取到科室id),需要触发选中左侧的科室节点,并查询出相应的科室所有医生信息。所以这个不适合直接采用element-ui的节点过滤搜索框来过滤节点,而element-ui也没有直接根据tree节点值触发节点点击的事件,所以需要额外写代码来实现这个交互效果。
效果图
主要实现代码
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 // 医生
// 触发查询指定医生的处理...
}
},
// 点击树节点事件处理
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;
}
}
}
一些属性、方法说明
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
|