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%; */
}

效果图:

相关推荐
FYKJ_20101 小时前
SSM校园失物招领系统41452-计算机课程设计、毕业设计
java·vue.js·spring boot·python·mysql·typescript·spark
研☆香1 小时前
jQuery + Swiper.js 实现动态渲染轮播图
前端·javascript·jquery
特立独行的猫A6 小时前
仓颉版 Tauri:基于轻量化线程与纯血鸿蒙架构的下一代 Web 混合开发利器
javascript
李游Leo6 小时前
HarmonyOS 7 ArkTS + ohpm:三方 JS 库副作用隔离与 API 26 升级回归【鸿蒙心迹】
javascript·回归·harmonyos
你挚爱的强哥7 小时前
【sgKeyboard】自定义组件:虚拟键盘
前端·javascript·计算机外设
锅里游的鱼吖7 小时前
echarts自定义折线图
前端·javascript·数据库
FYKJ_20107 小时前
springboot贺州地方新闻网站87812-计算机课程设计、毕业设计
java·vue.js·spring boot·python·mysql·django·课程设计
何何____7 小时前
Vue 全局事件总线详解
前端·javascript·vue.js
EatFan8 小时前
Go语言全栈实战:基于 Gin + Vue + JWT + RBAC 从零搭建前后端分离权限管理系统
vue.js·golang·go·vue·gin·jwt·rbac
u0111026758 小时前
工具页案例图如何编写 alt让图片说明与处理场景对应
java·前端·javascript·图像处理·人工智能·算法·ai作画