vue element-ui tree组件，根据不同的状态显示不同的字体颜色添加自定义图标或者图片

最新推荐文章于 2024-04-09 14:28:51 发布

~听风~

最新推荐文章于 2024-04-09 14:28:51 发布

阅读量750

点赞数 8

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_51551000/article/details/136873254

版权

介绍

实例代码使用的ruoyi微服务项目

一、前端

主要是添加 :render-content="renderContent"

<div class="tree-container" >
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
            :render-content="renderContent"
          />
 </div>


 renderContent(h, { node, data, store }) {
      // 确定节点颜色
      const nodeColor = data.isKeynote === "1" ? "red" : "#606266";
      let  nodeContent = "  " + node.label;
      let extraContent;
      // 根据节点层级确定要显示的图标
      if (node.level === 1) {
        extraContent = <svg-icon icon-class="tree1" class-name="custom-class"/>;
      } else if (node.level === 2) {
        extraContent = <svg-icon icon-class="tree2" class-name="custom-class"/>;
      }else if (node.level === 3) {
        extraContent = <svg-icon icon-class="tree3" class-name="custom-class"/>;
      }else if (node.level === 4) {
        extraContent = <svg-icon icon-class="tree4" class-name="custom-class" />;
      }
      // 构建节点内容
      // 返回带有相应样式的 JSX 元素
      return (
        <span style={`color:${nodeColor}; font-size: 14px`}>
          {extraContent}
          {nodeContent}
        </span>
      );
    },

二、后端

后端采用若依微服务架构

首先找到TreeSelect.java实体类文件添加字段 isKeynote （自定义）

package com.ruoyi.system.domain.vo;

import com.fasterxml.jackson.annotation.JsonInclude;
import com.ruoyi.system.api.domain.SysDept;
import com.ruoyi.system.domain.SysMenu;

import java.io.Serializable;
import java.util.List;
import java.util.stream.Collectors;

/**
 * Treeselect树结构实体类
 *
 * @author ruoyi
 */
public class TreeSelectVo implements Serializable
{
    private static final long serialVersionUID = 1L;

    /** 节点ID */
    private Long id;

    /** 节点名称 */
    private String label;

    /** 是否为重点区域 */
    private String isKeynote;

    /** 子节点 */
    @JsonInclude(JsonInclude.Include.NON_EMPTY)
    private List<TreeSelectVo> children;

    public TreeSelectVo()
    {

    }

    public TreeSelectVo(SysDept dept)
    {
        this.id = dept.getDeptId();
        this.label = dept.getDeptName();
        this.isKeynote = dept.getIsKeynote();
        this.children = dept.getChildren().stream().map(TreeSelectVo::new).collect(Collectors.toList());
    }

    public TreeSelectVo(SysMenu menu)
    {
        this.id = menu.getMenuId();
        this.label = menu.getMenuName();
        this.children = menu.getChildren().stream().map(TreeSelectVo::new).collect(Collectors.toList());
    }

    public Long getId()
    {
        return id;
    }

    public void setId(Long id)
    {
        this.id = id;
    }

    public String getIsKeynote() {
        return isKeynote;
    }

    public void setIsKeynote(String isKeynote) {
        this.isKeynote = isKeynote;
    }

    public String getLabel()
    {
        return label;
    }

    public void setLabel(String label)
    {
        this.label = label;
    }

    public List<TreeSelectVo> getChildren()
    {
        return children;
    }

    public void setChildren(List<TreeSelectVo> children)
    {
        this.children = children;
    }
}

然后修改 “构建前端所需要下拉树结构” 方法将 TreeSelect 修改为 TreeSelectVo即可

当然，返回的List集合中的类也是TreeSelectVo

/**
     * 构建前端所需要下拉树结构 多几个字段
     *
     * @param depts 部门列表
     * @return 下拉树结构列表
     */
    @Override
    public List<TreeSelectVo> buildDeptTreeVoSelect(List<SysDept> depts)
    {
        List<SysDept> deptTrees = buildDeptTree(depts);
        return deptTrees.stream().map(TreeSelectVo::new).collect(Collectors.toList());
    }