饿了么UI中el-tree中的树节点选中的高亮方式（highlight-current属性）

前言

在饿了么UI中，el-tree是一个非常优秀的树形组件，它提供了许多实用的功能，例如拖拽、懒加载、节点选择等。本文将介绍其中一项重要功能——树节点高亮。通过设置highlight-current属性，即可让树节点在被选中的时候进行高亮显示，这可以帮助用户快速找到当前选中的节点。

一、效果图

在介绍具体使用方法之前，我们先来看一下效果图：

[图片]

二、方式一

1. HTML结构

<el-tree :data="data" :props="props" highlight-current></el-tree>

2. JavaScript代码

const data = [
  {
    label: '父节点1',
    children: [
      {
        label: '子节点1'
      },
      {
        label: '子节点2'
      }
    ]
  },
  {
    label: '父节点2',
    children: [
      {
        label: '子节点3'
      },
      {
        label: '子节点4'
      }
    ]
  }
];

const props = {
  label: 'label',
  children: 'children'
};

const app = new Vue({
  data() {
    return {
      data,
      props
    };
  }
});

三、方式二

1. HTML结构

<el-tree :data="data" :props="props" :highlight-current="true"></el-tree>

2. JavaScript代码

const data = [
  {
    label: '父节点1',
    children: [
      {
        label: '子节点1'
      },
      {
        label: '子节点2'
      }
    ]
  },
  {
    label: '父节点2',
    children: [
      {
        label: '子节点3'
      },
      {
        label: '子节点4'
      }
    ]
  }
];

const props = {
  label: 'label',
  children: 'children'
};

const app = new Vue({
  data() {
    return {
      data,
      props
    };
  }
});

四、总结

本文介绍了两种方法在饿了么UI中使用el-tree组件实现树节点高亮效果。第一种方法是通过在el-tree组件上设置highlight-current属性来实现的，这种方法非常简单，但是只适合于简单的情况。第二种方法是通过在el-tree组件上设置highlight-current属性为true来实现的，这种方法更加复杂，但是可以满足更多的需求。