饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)

简介: 饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)

theme: smartblue

问题描述

我们知道树节点常常需要选择,为了看得更加直观明显,所以我们需要设置选中的时候,让选中的那个树节点颜色高亮,本文记录一下常用的三种方式,我们先看一下效果图

效果图

1111.gif

方式一

第一步:

el-tree组件标签上添加高亮属性 highlight-current ,表示要开启高亮功能。

第二步:

然后在css中深度作用域高亮样式代码即可

<style lang="less" scoped>
    /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      // 设置颜色
      background-color: #baf !important;
    }
</style>
注意这种方式是选中树节点高亮,即:树节点获取焦点是高亮,如果树节点失去焦点,也就是说点击了别的地方依然是高亮状态,即还保留高亮状态

方式二

如果是想要那种,选中高亮,不选中就不高亮的效果,我们单独使用css设置即可,这个时候就不用在树组件上加上highlight-current属性了,直接一句话获取焦点确定即可,如下语句:

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

上述两种方式都是通过css方式去控制的,我们也可以通过js方式去控制的,比如默认第一项高亮

指定默认高亮树节点

使用el-tree组件的setCurrentKey方法,根据树组件的树节点的唯一id来制定某个树节点高亮。当然要搭配node-key="id"给树节点绑定唯一标识id,同时也要开启高亮模式(加上highlight-current属性),然后方式一设置高亮的颜色样式要加上。初始化加载默认高亮,所以在mounted钩子中书写代码即可。

完整代码

<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: "二猴子",
                  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 数组件的ref  默认让第一项高亮 
        // data是树组件对应的数据
        // 通过data中的第一项的id找到对应的节点,然后把这个节点设置为高亮
        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 属性,因为要确定唯一性,node-key="id"因为一般都是id具有唯一性,所以绑定id。
相关文章
|
4月前
|
编解码 前端开发 API
SAP UI5 里响应式表格的 minScreenWidth 属性讲解
SAP UI5 里响应式表格的 minScreenWidth 属性讲解
22 0
SAP UI5 里响应式表格的 minScreenWidth 属性讲解
|
4月前
|
JavaScript 容器
SAP UI5 控件聚合属性 Aggregation 的概念和具体使用案例
SAP UI5 控件聚合属性 Aggregation 的概念和具体使用案例
28 1
|
4月前
|
算法
sap.ui.comp.smarttable.SmartTable 一些属性的用法阐述
sap.ui.comp.smarttable.SmartTable 一些属性的用法阐述
43 1
|
4月前
|
JSON 前端开发 JavaScript
授人以渔 - 如何查找 SAP UI5 官网上没有提到的控件属性的使用明细试读版
授人以渔 - 如何查找 SAP UI5 官网上没有提到的控件属性的使用明细试读版
29 0
|
4月前
|
XML 数据格式
SAP UI5 SimpleForm 控件的 adjustLabelSpan 属性
SAP UI5 SimpleForm 控件的 adjustLabelSpan 属性
25 0
|
5月前
|
Web App开发 前端开发 JavaScript
SAP UI5 Simple Form 属性 columnsL,columnsM,columnsXL 的属性深入剖析试读版
SAP UI5 Simple Form 属性 columnsL,columnsM,columnsXL 的属性深入剖析试读版
38 2
|
5月前
|
Web App开发 JSON 前端开发
授人以渔 - 如何自行查询任意 SAP UI5 控件属性的文档和技术实现细节试读版
授人以渔 - 如何自行查询任意 SAP UI5 控件属性的文档和技术实现细节试读版
34 0
|
5月前
|
Web App开发 前端开发 JavaScript
SAP UI5 应用 index.html 里引导 script 属性的解析原理
SAP UI5 应用 index.html 里引导 script 属性的解析原理
39 0
|
5月前
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之九十八 - 从 viewId 这个属性谈起,聊聊 SAP UI5 的 HTML 源代码生成机制试读版
SAP UI5 应用开发教程之九十八 - 从 viewId 这个属性谈起,聊聊 SAP UI5 的 HTML 源代码生成机制试读版
36 0
|
10月前
|
JSON API 数据格式
授人以渔 - 如何查找 SAP UI5 官网上没有提到的控件属性的使用明细试读版
授人以渔 - 如何查找 SAP UI5 官网上没有提到的控件属性的使用明细试读版

相关产品

  • 云迁移中心