El - tree to set focus on selected highlight highlighting, the selected node deepen background and change the font color, etc

el-tree默认的focusStyle color is too light,Sometimes the computer brightness is low or change to a screen with a color difference,It is impossible to tell which node is selected at all.And only the focus is thereel-treeOnly when the color changes,Click anywhere else with the mouse and it's gone,This will make the user forget which node they have selected before,很不方便.

---

第一步：给el-treeComponent tags plus attributeshighlight-current开启高亮

Added this attribute,The style of the selected node will only be availablehighlight-current类,In this way, the style of the selected node can be changed next.

---

第二步：在cssModify the highlight style in

一个小tip：The suggestion here is for the outermost layer of the page filedivAdd a special class,For example, my page is“组织配置”,Add a labelclass=“organization_configuration”,然后styleAll styles are written in.organization_configuration{}中,这样就不用加scoped了,也更符合vue组件化的开发思路

<style lang="less">
.organization_configuration {

  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // 设置颜色
    background-color: rgba(135, 206, 235, 0.2); // 透明度为0.2的skyblue,The author's favorite color 
    color: #409eff; // 节点的字体颜色
    font-weight: bold; // 字体加粗
  }

来看一下页面效果：

---

If the desired effect is just highlighting on click,Changes back to the original style after losing focus,No need to add labelshighlight-current属性了,直接修改css即可：

  .el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(135, 206, 235, 0.3);
    color: #409eff; //节点的字体颜色
    font-weight: bold;
  }

---

Specifies the default highlighted tree node,参考：点击链接

使用el-tree组件的setCurrentKey方法,Unique to tree nodes according to tree componentsidto make a tree node highlight.Of course to matchnode-key="id"Bind unique identifiers to tree nodesid,Also enable highlight mode（加上highlight-current属性）,Then way one sets the highlighted color style to be added.Initial loading is highlighted by default,所以在mountedJust write code in the hook.

完整代码：

<template>
  <div class="box">
    <el-tree
      ref="myTree"
      node-key="id"
      :data="data"
      :props="defaultProps"
      highlight-current
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: "西游记",
          id: "xiyouji",
          children: [
            {
              name: "孙悟空",
              id: "sunwukong",
              children: [
                {
                  name: "大猴子",
                  id: "dahouzi",
                  children: [],
                },
                {
                  name: "two monkeys",
                  id: "erhouzi",
                  children: [],
                },
              ],
            },
            {
              name: "猪八戒",
              id: "zhubajie",
              children: [],
            },
            {
              name: "沙和尚",
              id: "shaheshang",
              children: [],
            },
          ],
        },
        {
          name: "水浒传",
          id: "shuihuzhuan",
          children: [
            {
              name: "宋江",
              id: "songjiang",
              children: [],
            },
            {
              name: "武松",
              id: "wusong",
              children: [],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.$nextTick(() => {
        // myTree number of componentsref  The first item is highlighted by default 
        // datais the data corresponding to the tree component
        // 通过dataof the first itemid找到对应的节点,Then set this node to be highlighted
        this.$refs.myTree.setCurrentKey(this.data[0].id);
      });
    });
  },
};
</script>
<style lang="less" scoped>
// 设置高亮颜色
/deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #baf !important;
}
</style>

setCurrentKey方法是通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性,Because of the uniqueness,node-key="id"因为一般都是id具有唯一性,所以绑定id.

---

THX~

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在.深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小.自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前.因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担.添加下方名片,即可获取全套学习资料哦