【Vue3】【方案二】element-tree通过setCurrentKey来实现 点击读取输入来触发树的【选中】并【自动展开】的效果

参考：

• Element树形控件Tree踩坑：修改current-node-key无效

前文提要：

• 【Vue3】【方案一】通过按钮触发树的【选中】和【自动展开】效果

方案二：

我们希望根据输入内容，实时展示对应选中的节点：

<template>需要修改的地方：

0. 需要绑定一个data里面的值，使用v-model实时读取当前输入，
   
   

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>需要修改的代码

1. 需要在watch里面加入一个设置当前节点的函数，
   这里的参数是需要被选中的节点的参数
   
   watch能够实时刷新，保证实时读取输入
2. 需要在data的return里面加一个变量currertKey
   

函数说明：

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

方案二总代码

<template>
  <el-input
    placeholder="请输入需要被选中的节点名称"
    v-model="currertKey"
  ></el-input>

  <el-tree
    ref="tree"
    :data="data"
    :props="defaultProps"
    node-key="label"
    @node-click="handleNodeClick"
    highlight-current
  ></el-tree>
</template>

<script>
export default {
  watch: {
    currertKey(label) {
      if (label) {
        this.$refs["tree"].setCurrentKey(label);
        //或者this.$refs.tree.setCurrentKey(label);
      } else {
        this.$refs["tree"].setCurrentKey(null);
      }
    },
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
  data() {
    return {
      currertKey: "",
      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>