【vue3】实现el-tree组件，将不同层级的箭头修改成自定义图标的组件封装及调用

已于 2023-06-20 17:30:50 修改
阅读量4.2k 收藏 11
点赞数 7
分类专栏： vue3+ts 文章标签： vue.js javascript 前端
于 2023-05-10 10:57:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50450473/article/details/130595325
版权

一、图例

 二、el-tree相关设置

1、实现只点击图标不点击文字展开下一级节点

<el-tree :expand-on-click-node="false"></el-tree>

2、实现为第一层文字加粗效果

<el-tree :props="{class: customNodeClass}"></el-tree>

<script lang='ts' setup>
import { onMounted, reactive } from 'vue';
const person = reactive({
  treeData:[
    {
      id: 1,
      label: '教材',
      isPenultimate: true,  // 在需要设置加粗的第一层加上这个属性
      children: [
        {
          id: 11,
          label: '一年级上册',
          children: [
            {
              id: 111,
              label: '我上学了',
            }
          ]
        }
      ]
    }
  ]
})

// 默认选中项样式
const customNodeClass = (data: any, node: Node) => {
  if (data.isPenultimate) {
    return 'is-penultimate'
  }
  return null
}
</script>

<style lang='scss' scoped>
:deep(.is-penultimate > .el-tree-node__content) {
  font-weight: bold;
}
</style>

3、将箭头修改成自定义图标

// 设置本身箭头为隐藏状态
:deep(.el-tree-node__expand-icon){
  width: 20px;
  padding: 0;
  margin: 5px 0;
  svg{
    display: none;
    width: 0;
  }
}
// 第一层
:deep(.el-tree-node){
  white-space: inherit;
  // 关闭状态
  .el-tree-node__expand-icon::before{
    background: url("../../../assets/img/new/jia_icon.png") no-repeat;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
  }
  // 展开状态
  .el-tree-node__expand-icon.expanded::before{
    background: url("../../../assets/img/new/jian_icon.png") no-repeat;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
  }
  // 没有子节点
  .el-tree-node__expand-icon.is-leaf::before {
    background: url("../../../assets/img/new/jian_icon.png") no-repeat;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
  }
  // 第二层
  & > .el-tree-node__children {
    // 关闭状态
    .el-tree-node__expand-icon::before{
      background: url("../../../assets/img/new/jia_yuan.png") no-repeat;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      background-size: 100% 100%;
    }
    // 展开状态
    .el-tree-node__expand-icon.expanded::before{
      background: url("../../../assets/img/new/jian_yuan.png") no-repeat;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      background-size: 100% 100%;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("../../../assets/img/new/jian_yuan.png") no-repeat;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      background-size: 100% 100%;
    }
  }
  // 第三层
  & > .el-tree-node > .el-tree-node__children {
    // 关闭状态
    .el-tree-node__expand-icon::before{
      background: url("../../../assets/img/new/jia_yuan.png") no-repeat;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      background-size: 100% 100%;
    }
    // 展开状态
    .el-tree-node__expand-icon.expanded::before{
      background: url("../../../assets/img/new/jian_yuan.png") no-repeat;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      background-size: 100% 100%;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("../../../assets/img/new/jian_yuan.png") no-repeat;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      background-size: 100% 100%;
    }
  }
}

4、文字选中状态,或鼠标经过的样式

// 文字选中样式
:deep(.el-tree-node:focus){
  >.el-tree-node__content{
    background-color: transparent;
    color: #2080F7;
  }
}
// 鼠标经过文字
:deep(.el-tree-node__content:hover){
   background-color: transparent;
   color: #2080F7;
}

5、设置节点默认选中项，通过高亮

<el-tree ref="myTree" :highlight-current="true" :current-node-key="person.treeCheckedData" node-key="Id"></el-tree>

<script lang='ts' setup>

import { reactive,onMounted,ref } from 'vue';
const person = reactive({
  treeData:[
    {
      id: 1,
      label: '教材',
      isPenultimate: true,
      children: [
        {
          id: 11,
          label: '一年级上册',
          children: [
            {
              id: 111,
              label: '我上学了',
            }
          ]
        }
      ]
    },
    ......
    ......
  ],
  treeCheckedData:0 // 默认选中项
})
const myTree=ref()

onMounted(()=>{
  load()
})
// 初始化
const load=()=>{
  person.treeData.forEach((tr:any,trIndex:number)=>{
     tr.children.forEach((chi:any)=>{
        // 符合条件就显示高亮
        if(chi.ObjId===person.prevIds.currId){
           nextTick(() => {
               myTree.value.setCurrentKey(chi.Id);
               // 或者 以下 2选1即可
               person.treeCheckedData=chi.Id
           });
        }
     })
  })
}

</script>

<style lang='scss' scoped>
// 设置自定义节点选中高亮样式
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
    background-color: transparent;
    color: #2080F7;
 }
</style>

6、获取当前选中节点的父级节点信息

myTree.value.currentNode.parent

7、默认展开第一级节点

<el-tree node-key="id" :default-expanded-keys="person.treeExpandData"></el-tree>

<script lang='ts' setup>

import { reactive,onMounted } from 'vue';
const person = reactive({
  treeData:[
    {
      id: 1,
      label: '教材',
      isPenultimate: true,
      children: [
        {
          id: 11,
          label: '一年级上册',
          children: [
            {
              id: 111,
              label: '我上学了',
            }
          ]
        }
      ]
    },
    ......
    ......
  ],
  treeExpandData:[] // 默认展开数组
})

onMounted(()=>{
  load()
})
// 初始化
const load=()=>{
  person.treeExpandData.push(person.treeData[0].id)
}

</script>

三、完整代码

<template>
<div class="menu">
  <div class="menu_list">
    <el-tree :highlight-current="true" :current-node-key="person.treeCheckedData" node-key="Id" ref="myTree" :default-expanded-keys="person.treeExpandData" :expand-on-click-node="false" accordion :data="person.treeData" :props="{class: customNodeClass}" @node-click="onNodeClick" >
      <template #default="{ node,data }">
        <div class="tree_title">{{ node.label }}{{ data.id }}</div>
      </template>
    </el-tree>
  </div>
</div>
</template>
<script lang='ts' setup>
import { onMounted, reactive } from 'vue';
const person = reactive({
  treeData:[
    {
      id: 1,
      label: '教材',
      isPenultimate: true,
      children: [
        {
          id: 11,
          label: '一年级上册',
          children: [
            {
              id: 111,
              label: '我上学了',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: '小升初',
      isPenultimate: true,
      children: [
        {
          id: 22,
          label: 'Level two 2-1',
          children: [
            {
              id: 222,
              label: 'Level three 2-1-1',
            },
          ],
        },
        {
          id: 23,
          label: 'Level two 2-2',
          children: [
            {
              id: 232,
              label: 'Level three 2-2-1',
            },
          ],
        },
      ],
    },
    {
      id: 3,
      label: '知识点',
      isPenultimate: true,
      children: [
        {
          id: 33,
          label: 'Level two 3-1',
          children: [
            {
              id: 333,
              label: 'Level three 3-1-1',
            }
          ]
        },
        {
          id: 34,
          label: 'Level two 3-2',
          children: [
            {
              id: 343,
              label: 'Level three 3-2-1',
            }
          ]
        }
      ]
    }
  ],
  treeExpandData:[],  // 默认展开项
  treeCheckedData:0 // 默认选中项
})

onMounted(()=>{
  load()
})
// 初始化
const load=()=>{
  person.treeExpandData.push(person.treeData[0].id)

  person.treeData.forEach((tr:any,trIndex:number)=>{
     tr.children.forEach((chi:any)=>{
        // 符合条件就显示高亮
        if(chi.ObjId===person.prevIds.currId){
           nextTick(() => {=
               myTree.value.setCurrentKey(chi.Id);
               // 或者 以下 2选1即可
               person.treeCheckedData=chi.Id
           });
        }
     })
  })
}

// 节点单击事件
const onNodeClick=()=>{

}
// 默认选中项样式
const customNodeClass = (data: any, node: Node) => {
  if (data.isPenultimate) {
    return 'is-penultimate'
  }
  return null
}
</script>
<style lang='scss' scoped>
 .menu {
  .menu_list{
    :deep(.el-tree-node__content){
      height: inherit;
      padding: 5px 0;
      align-items: center;
      &:hover{
        background-color: transparent;
        color: #2080F7;
      }
      .tree_title{
        margin-left: 5px;
        width: 90%;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        overflow: hidden;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }
      // 设置本身箭头为隐藏状态
      .el-tree-node__expand-icon{
        width: 20px;
        padding: 0;
        margin: 5px 0;
        svg{
          display: none;
          width: 0;
        }
      }
      // 禁止图标旋转
      .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    }
    :deep(.is-penultimate > .el-tree-node__content) {
      font-weight: bold;
    }
    // 自定义节点高亮样式
    :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
      background-color: transparent;
      color: #2080F7;
    }
    // 文字选中状态
    :deep(.el-tree-node:focus){
      >.el-tree-node__content{
        background-color: transparent;
        color: #2080F7;
      }
    }
    // 第一层
    :deep(.el-tree-node){
      white-space: inherit;
      // 关闭状态
      .el-tree-node__expand-icon::before{
        background: url("../../../assets/img/new/jia_icon.png") no-repeat;
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
      }
      // 展开状态
      .el-tree-node__expand-icon.expanded::before{
        background: url("../../../assets/img/new/jian_icon.png") no-repeat;
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
      }
      // 没有子节点
      .el-tree-node__expand-icon.is-leaf::before {
        background: url("../../../assets/img/new/jian_icon.png") no-repeat;
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
      }
      // 第二层
      & > .el-tree-node__children {
        // 关闭状态
        .el-tree-node__expand-icon::before{
          background: url("../../../assets/img/new/jia_yuan.png") no-repeat;
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
        }
        // 展开状态
        .el-tree-node__expand-icon.expanded::before{
          background: url("../../../assets/img/new/jian_yuan.png") no-repeat;
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
        }
        // 没有子节点
        .el-tree-node__expand-icon.is-leaf::before {
          background: url("../../../assets/img/new/jian_yuan.png") no-repeat;
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
        }
      }
      // 第三层
      & > .el-tree-node > .el-tree-node__children {
        // 关闭状态
        .el-tree-node__expand-icon::before{
          background: url("../../../assets/img/new/jia_yuan.png") no-repeat;
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
        }
        // 展开状态
        .el-tree-node__expand-icon.expanded::before{
          background: url("../../../assets/img/new/jian_yuan.png") no-repeat;
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
        }
        // 没有子节点
        .el-tree-node__expand-icon.is-leaf::before {
          background: url("../../../assets/img/new/jian_yuan.png") no-repeat;
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
        }
      }
    }
  }
}

</style>

       希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

禾小毅
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
VUE3 + Elementui-Plus 之 树形组件el-tree 一键展开（收起）；一键全选（不全选）
最新发布
HanXiaoXi_yeal的博客
04-10 1232
注意：以上方法会展开或折叠所有节点；
【Vue入门实践1】可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
热门推荐
Sabrina_cc的博客
02-15 1万+
本篇文章主要讲解了在vue若依框架中对el-tree和el-table实现修改。主要实现了自定义el-tree样式、el-tree和el-table联动、el-tree编辑树等效果。
element ui, el-tree, 自定义图标
gaowxx的博客
04-09 603
【代码】element ui, el-tree, 自定义图标。
vue + element tree 设置展开，折叠图标,设置节点前图标
王博的博客
05-13 9093
效果图： 1. 设置展开，折叠图标 <style lang="scss"> .el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .el-tree .el-icon-caret-ri...
使用＜/el-tree＞组件增加自定义树节点的图标
多看书少吃饭的博客
06-02 3432
使用组件增加自定义树节点的图标
给el-tree添加自定义图标
weixin_43258184的博客
05-17 6444
<el-tree v-if="treeVisible" ref="tree" :props="Props" node-key="id" :default-expanded-keys="level" style="height:120vh" :allow-drop="allowDrop" draggable accordio.
el-tree组件图标的自定义
Roy__Jason的博客
08-19 3277
el-tree组件图标的自定义
el-tree自定义图标，使用图片或者dom自定义图标，element-plus
阿啵呲嘚的博客
12-02 4586
el-tree自定义图标，基于element-plus，实现完全自定义
vue3 组件库 (六)：Tree 组件
weixin_43960320的博客
03-23 6449
在工作中我们经常会用到Tree组件，今天就来实现一个简易版的Tree组件，完整的代码请到仓库获取在线预览github 地址 数据展示 先来看看用户传递过来的数据 从上面的使用可以了解到需要定义接收 data、props属性，触发一个node-click事件 getNodes 将用户传递过来的数据进行转换renderContext 使用转换后的数据渲染，需要考虑有子节点和没有子节点的情况初次渲染的效果 renderContext中给content添加is-expand类，展开条件判断
django+vue3+el-tree树形组件菜单
weixin_62935305的博客
05-28 2748
django+vue3+el-tree树形 1.分析django 中所需要的表 2.django 中主要实现的业务逻辑 3.vue3中使用elementUI配置 4.vue3使用el-tree的布局 5.el-tree上附加的功能
vue3-blocks-tree:vue3块组织树视图组件。 分层的水平或垂直树
04-29
vue3块树基于Vue3.x的简单组织结构树视图。 它支持事件，时段，水平视觉和节点操纵感谢和他以vue 2为基础的资料。用法< template> < h1>Basic</ h1> < div> ...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-tree实现el-transfer(穿梭框)的效果代码（全）
04-25
1、勾选左侧的功能资源，点击【添加】，可将内容添加到右侧，并且左侧勾选的数据删除；勾选右侧的已选资源，效果同左侧一样； 2、勾选全选，则资源全部添加到右侧，左侧的则显示为空 3、保存后点击编辑，左侧显示未...
vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法
weixin_44867717的博客
09-22 2854
【代码】vue3中，封装el-tree树形控件组件，用于组织架构——defineEmits、defineProps& vue3之computed计算属性、watch和nextTick监听的写法 & `${写法。
vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线
Thurmanwang的博客
12-07 8081
vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线 组件库的el-tree样式 由于基础版的样式不满足当前的ui设计，所以对el-tree做一下样式改造 参考的博客 并做了一部分优化，目前呈现样式如下： 代码具体实现 1、template模板引入el-tree组件，注意点需要设置:indent=“0”，不然每层树padding-left呈18px的倍数增加 <div class="mytree"> <el-tree :indent="
vue3 el-tree ts数据格式递归处理，获取所有父节点信息，实时筛选
weixin_40449665的博客
09-02 5372
实现el-tree筛选，其中要注意数据格式的处理以及所有父节点信息的获取
封装el-tree组件
03-29
封装el-tree组件的步骤如下： 1. 引入Element UI库 在项目中引入Element UI库，以便使用el-tree组件。 2. 创建一个vue组件 使用Vue框架创建一个组件，可以使用单文件组件或者普通的Vue组件。 3. 注册el-tree组件 在Vue组件中注册el-tree组件，可以使用全局注册或局部注册的方式。 4. 定义el-tree组件的props属性 定义el-tree组件的props属性，用于接收父组件传递的数据。 5. 定义el-tree组件的data属性 定义el-tree组件的data属性，用于存储el-tree组件的状态数据。 6. 定义el-tree组件的methods方法 定义el-tree组件的methods方法，用于处理el-tree组件的事件和逻辑。 7. 编写el-tree组件的template模板 编写el-tree组件的template模板，用于渲染el-tree组件的界面。 8. 在父组件中使用el-tree组件 在父组件中使用el-tree组件，并传递相应的props属性，即可使用封装好的el-tree组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值