elementui-樹形控件實現(xiàn)子節(jié)點右側添加圖標和數(shù)據(jù)鼠標放上去顯示文字效果
更新時間：2024年01月16日 10:41:03 作者：hat-ing
這篇文章主要介紹了elementui-樹形控件實現(xiàn)子節(jié)點右側添加圖標和數(shù)據(jù)鼠標放上去顯示文字效果,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧
1、代碼
<el-tree
v-loading="nameLoding"
:data="data"
node-key="id"
:highlight-current="true"
empty-text="暫無數(shù)據(jù)"
: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="擁有的指標權限個數(shù)"
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="擁有的訪問權限個數(shù)"
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-樹形控件實現(xiàn)子節(jié)點右側添加圖標和數(shù)據(jù)，鼠標放上去顯示文字的文章就介紹到這了,更多相關elementui樹形控件子節(jié)點右側添加圖標內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在開發(fā)的過程中,我們會經常使用到axios進行數(shù)據(jù)的交互,這篇文章主要給大家介紹了關于axios四種傳參方式及后端接參的相關資料,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-10-10
這篇文章總結了JavaScript的一些簡寫技巧，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了jQuery插件datepicker 日期連續(xù)選擇的方法和示例，有需要的小伙伴可以參考下。2015-06-06
這篇文章主要介紹了實現(xiàn)一個通用的“劃詞高亮”在線筆記文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
下面小編就為大家?guī)硪黄僯s實現(xiàn)頁面返回頂部的動畫(超簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本文主要介紹了JS變量及其作用域的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
本文為大家詳細介紹下通過JS實現(xiàn)可改變列寬的table，具體的思路及代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
因為要做一個日歷控件,遇到國家法定節(jié)假日,怎么實現(xiàn)此功能呢?這篇文章主要給大家介紹了關于前端判斷節(jié)假日的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細介紹了微信小程序自定義select下拉選項框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了微信小程序封裝自定義彈窗的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05