【Vue3】【方案一】element-tree通过setCurrentKey来实现 点击按钮触发树的【选中】并【自动展开】的效果

参考：

• Vue – Element UI的Tree组件中，this.$refs.menuTree.setCurrentKey()设置当前被选中的树节点无效果

关联后文：

• 【Vue3】【方案二】通告读取输入来触发树的【选中】并【自动展开】的效果

方案一：

我们希望点击按钮，点击后，树节点就自动被选中

<template>需要修改的地方：

1. 需要设置一个引用组件的点：ref="tree"，使得后面的method里面的函数可以操控在template里面的dom元素

2. 需要设置一个node-key，这个值需要独一无二，根据文档内容：
   
   需要设置待被选择的节点的key，如果为null则取消当前高亮的节点，我这里设置为tree的数据里的label关键字
   注意：
     如果这里的label重复了，那么点击出来的效果，会是先设置当前节点为一级1下面的三级2-1-1然后又搜索到了一级2下面的三级 2-1-1，最终显示的是后面那个三级 2-1-1被选中！！！！
   

3. 需要设置一个高亮，使得选择的节点高亮起来
   
   

<script>需要修改的代码

需要在methods里面加入一个设置当前节点的函数，
这里的参数是需要被选中的节点的参数

函数说明：

ChooseAimNode() {
      this.$refs["tree"].setCurrentKey("需要被选中的节点的参数");
    },

方案一总代码

<template>
  <el-button type="primary" @click="ChooseAimNode"
    >点我选中3级2-2-1！！</el-button
  >
  <el-tree
    ref="tree"
    :data="data"
    :props="defaultProps"
    node-key="label"
    @node-click="handleNodeClick"
    highlight-current
  ></el-tree>
</template>

<script>
export default {
  methods: {
    ChooseAimNode() {
      console.log(this.$refs["tree"]);
      this.$refs["tree"].setCurrentKey("三级 2-1-1");
      console.log(this.$refs["tree"].getCurrentNode());
    },
    handleNodeClick(data) {
      console.log(data);
    },
  },
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>

<style>
.el-tree-node:focus > .el-tree-node__content {
  /*设置选中的样式 */
  background-color: #dde9ff !important;
}
.el-tree-node__content:hover {
  /*设置鼠标飘过的颜色 */
  background: #eaf9ff !important;
  color: #007bff;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  /*current选中的样式 */
  color: #4d95fd;
  font-weight: bold;
  background-color: #dde9ff !important;
}
</style>