el-tree设置有子元素的节点不能选中高亮(vue2和vue3两种写法）

忘是亡心i 2024-03-30 09:23 56阅读 0赞

### vue2+element-ui ###

发现element-ui中更改`current-node-key`值无效，最后用`this.$refs.tree.setCurrentKey`方法实现了  
思路：

1.  el-tree加上`highlight-current`属性，高亮当前选中节点
2.  `ref="tree"`绑定组件
3.  el-tree的`点击事件@node-click`中判断是有子元素的节点，则找到上次高亮的节点，让它继续选中高亮，思路是通过`node-key="id"`和`this.$refs.tree.setCurrentKey`方法

<el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            highlight-current
            ref="tree"
            node-key="id"
          >

handleNodeClick(data, node) {
        
          if (data.children?.length) {
        
            this.$nextTick(() => {
        
              this.$refs.tree.setCurrentKey(this.currentNodeKey);
            });
            return;
          }
          this.currentNodeKey = data.id;
        },

### vue3+element-plus ###

发现element-plus中更改`current-node-key`值是有效的，通过这个属性实现  
思路：

1.  el-tree加上`highlight-current`属性，高亮当前选中节点
2.  el-tree的`点击事件@node-click`中判断有子元素的节点不能选中高亮，核心代码`node.isCurrent = false`，让当前节点取消选中
3.  这时需要找到上次高亮的节点，让它继续选中高亮，思路是通过`node-key`与`current-node-key`属性还原高亮节点

<template>
      <el-tree 
          :data="data" 
          :props="defaultProps" 
          @node-click="handleNodeClick" 
          highlight-current  
          node-key="id"  
          :current-node-key="currentNodeKey"
          default-expand-all
          :expand-on-click-node="false"/>
    </template>
    
    <script lang="ts" setup>
    import type Node from 'element-plus/es/components/tree/src/model/node'
    import {
           ref, nextTick } from "vue"
    interface Tree {
          
      label: string
      children?: Tree[]
    }
    
    const currentNodeKey = ref("")
    const treeId = ref("")
    const handleNodeClick = (data: Tree, node: Node) => {
          
        // 有子元素的节点，不能选中
        if (data.children.length) {
          
            node.isCurrent = false
            // 值更改，触发watch
            currentNodeKey.value = ""
            // 还原之前的高亮节点
            nextTick(() => {
          
              currentNodeKey.value = treeId.value
            })
            return
        }
        treeId.value = data.id
        // 点击树节点执行的代码
        ...
    }
    
    const data: Tree[] = [
      {
          
        label: 'Level one 1',
        children: [
          {
          
            label: 'Level two 1-1',
            children: [
              {
          
                label: 'Level three 1-1-1',
              },
            ],
          },
        ],
      },
      {
          
        label: 'Level one 2',
        children: [
          {
          
            label: 'Level two 2-1',
            children: [
              {
          
                label: 'Level three 2-1-1',
              },
            ],
          },
          {
          
            label: 'Level two 2-2',
            children: [
              {
          
                label: 'Level three 2-2-1',
              },
            ],
          },
        ],
      },
      {
          
        label: 'Level one 3',
        children: [
          {
          
            label: 'Level two 3-1',
            children: [
              {
          
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
          
            label: 'Level two 3-2',
            children: [
              {
          
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
    ]
    
    const defaultProps = {
          
      children: 'children',
      label: 'label',
    }
    </script>