vue3.2 element-plus el-tree仅点击子级最后一级高亮,父级不高亮

项目需求

tree有两级或三级结构(管理员登录时有三级),展示集团和公司的列表

  • 选中集团不高亮无操作
  • 选中公司高亮且右侧显示详情
  • 点击页面空白失焦,子级高亮不变

试了el-tree的配置项,只要失焦,子级高亮就会消失,不满足需求,最后通过slot自己实现
关键代码如下,提供个思路
代码里边有tree的引导线,用了别人的插件,这部分不需要可以略过

//template
<div>
   <el-input class="mb20" v-model="state.filterText" placeholder="输入公司名称" />
   <el-tree
     ref="treeRef"
     :data="state.treeData"
     node-key="id"
     default-expand-all
     :props="defaultProps"
     :filter-node-method="filterNode"
     :expand-on-click-node="false"
     @node-click="handleNodeClick"
     :current-node-key="state.currentNodeKey"
   >
     <template v-slot:default="{ node, data }">
     
       <element-tree-line
         :node="node"
         :showLabelLine="false"
         :indent="16"
         
                    

你可能感兴趣的:(vue.js,elementui,前端)