elementui-树形控件实现子节点右侧添加图标和数据鼠标放上去显示文字效果

 更新时间:2024年01月16日 10:41:03   作者:hat-ing  
这篇文章主要介绍了elementui-树形控件实现子节点右侧添加图标和数据鼠标放上去显示文字效果,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

1、代码

 <el-tree
                        v-loading="nameLoding"
                        :data="data"
                        node-key="id"
                        :highlight-current="true"
                        empty-text="暂无数据"
                        :props="defaultPropsIndex"
                        default-expand-all
                        :filter-node-method="filterNodeIndex"
                        ref="treeName"
                        @node-click="getCheckedNodes"
                      >
                        <span
                          class="custom-tree-node"
                          slot-scope="{ node, data }"
                        >
                          <span>{{ node.label }}</span>
                          <span v-if="node.level > 1">
                            <span
                              style="
                                text-align: left;
                                width: 63px;
                                display: inline-block;
                              "
                            >
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="拥有的指标权限个数"
                                placement="top"
                              >
                                <i
                                  title=""
                                  class="el-icon-s-marketing"
                                  style="color: rgb(103, 194, 58)"
                                ></i> </el-tooltip
                              ><span style="margin-right: 10%">{{
                                data.num
                              }}</span></span
                            >
                            <span
                              style="
                                text-align: left;
                                width: 71px;
                                display: inline-block;
                              "
                            >
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="拥有的访问权限个数"
                                placement="top"
                              >
                                <i
                                  class="el-icon-success"
                                  style="color: rgb(103, 194, 58)"
                                ></i> </el-tooltip
                              ><span style="margin-right: 10%">{{
                                data.sub_num
                              }}</span>
                            </span>
                          </span>
                        </span>
                      </el-tree>

css

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* padding-right: 8px; */
  /* padding-right: 15%; */
}

效果图:

到此这篇关于elementui-树形控件实现子节点右侧添加图标和数据,鼠标放上去显示文字的文章就介绍到这了,更多相关elementui树形控件子节点右侧添加图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js和jquery判断数据类型的4种方法总结

    js和jquery判断数据类型的4种方法总结

    这篇文章主要给大家介绍了关于js和jquery判断数据类型的4种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 用纯JS实现二级菜单效果

    用纯JS实现二级菜单效果

    这篇文章主要为大家详细介绍了用纯JS实现二级菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 微信小程序获取当前位置和城市名

    微信小程序获取当前位置和城市名

    这篇文章主要介绍了微信小程序获取当前位置和城市名的思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • JavaScript之Map和Set_动力节点Java学院整理

    JavaScript之Map和Set_动力节点Java学院整理

    这篇文章主要为大家详细介绍了JavaScript之Map和Set的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 利用js给datalist或select动态添加option选项的方法

    利用js给datalist或select动态添加option选项的方法

    下面小编就为大家分享一篇利用js给datalist或select动态添加option选项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 微信小程序request请求封装,验签代码实例

    微信小程序request请求封装,验签代码实例

    这篇文章主要介绍了微信小程序request请求封装,验签代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 一文详解JavaScript中内建对象

    一文详解JavaScript中内建对象

    这篇文章主要为大家详细介绍了JavaScript中内建对象的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例

    js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例

    这篇文章主要介绍了js常用方法、检查是否有特殊字符串、倒序截取字符串操作,结合完整实例形式分析了JavaScript字符串转换、检测、倒序、截取等相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • 用js实现猜数字小游戏

    用js实现猜数字小游戏

    这篇文章主要为大家详细介绍了用js实现猜数字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 前端使用pdf.js渲染pdf文件解决方案

    前端使用pdf.js渲染pdf文件解决方案

    这篇文章主要介绍了前端使用pdf.js渲染pdf文件解决方案,pdf.js用于前端渲染PDF并实现搜索、缩放、目录等交互功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-07-07

最新评论