Problem description

We know that tree nodes often need to be selected, in order to see more intuitive, so we need to set when selected, so that the selected tree node color highlight, this article records the common three ways, we first look at the effect picture

rendering

Methods a

The first step:

The highlight attribute highlight-current is added to the el-Tree component label, indicating that the highlighting function is enabled.

The second step:

Then highlight the style code in depth scope in CSS

<style lang="less" scoped>
    /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{// Set the colorbackground-color: #baf ! important;
    }
</style>
Copy the code

Note that in this way, the tree node is highlighted, i.e., the tree node is highlighted when it gains focus. If the tree node loses focus, that is to say, the tree node is still highlighted when it is clicked elsewhere

Way 2

If you want to highlight or unhighlight, you can use CSS alone. You don’t need to add the highlight-current property to the tree component.

<style lang="less" scoped>
    /deep/.el-tree-node:focus > .el-tree-node__content { background-color: #bfa ! important; } </style>Copy the code

The above two methods are controlled by CSS, we can also control by JS, such as the default first item highlight

Specifies the default highlight tree node

Highlight a tree node based on the unique ID of the tree node of the tree component using the setCurrentKey method of the El-Tree component. Add node-key=”id” to the tree node binding to uniquely identify the ID, and also highlight mode (with the highlight-current attribute). The initial load is highlighted by default, so just write the code in the Mounted hook.

The complete code

<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: Journey to the West.id: "xiyouji".children: [{name: "Sun Wukong".id: "sunwukong".children: [{name: "Big Monkey".id: "dahouzi".children: []}, {name: "Two Monkeys".id: "erhouzi".children: [],},],}, {name: "Pig Eight Quit".id: "zhubajie".children: []}, {name: "Sand Monk".id: "shaheshang".children: [],},],}, {name: "Water Margin".id: "shuihuzhuan".children: [{name: "Sung river".id: "songjiang".children: []}, {name: "Wu song".id: "wusong".children: [],},],},defaultProps: {
        children: "children".label: "name",}}; },mounted() {
    this.$nextTick(function () {
      this.$nextTick(() = > {
        // The ref of the myTree component makes the first item highlighted by default
        // Data is the data corresponding to the tree component
        // Find the corresponding node by the id of the first item in data, and set this node to highlight
        this.$refs.myTree.setCurrentKey(this.data[0].id); }); }); }};</script>
<style lang="less" scoped>// Set the highlight color to /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #baf ! important;
}
</style>
Copy the code

The setCurrentKey method uses the key to set the current selected state of a node. To use this method, you must set the node-key property, because to determine uniqueness, node-key=” ID “, because id is usually unique, so bind id.