vue中的el-tree @node-click傳自定義參數(shù)
更新時間：2022年08月15日 15:45:34 作者：成長中...
這篇文章主要介紹了vue中的el-tree @node-click傳自定義參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
el-tree @node-click傳自定義參數(shù)
<el-tree node-click="(data, node, item) => nodeClick(data, node, item, param)"></el-tree>
nodeClick(data, node, item, param) {
?? ?console.log(data) ? // data,node,item為默認參數(shù)
?? ?console.log(node)
?? ?console.log(item)
?? ?console.log(param) ? ?// param為自定義的參數(shù)
}給el-tree添加自定義圖標
<el-tree
v-if="treeVisible"
ref="tree"
:props="Props"
node-key="id"
:default-expanded-keys="level"
style="height:120vh"
:allow-drop="allowDrop"
draggable
accordion
:allow-drag="allowDrag"
lazy
:load="loadNode"
@node-click="handleNodeClick"
@node-contextmenu="rihgtClick"
@node-drag-start="ondeDrag"
>
<span slot-scope="{ node, data }">
<i :class="data.icon" style="font-size:0.3rem" />
<span style="padding-left:4px;font-size:0.3rem">{{ data.name }}</span>
</span>
</el-tree>
主要思路就是，在el-tree標簽里添加：
<span slot-scope="{ node, data }">
? ? ? ? ? ? <i :class="data.icon" style="font-size:0.3rem" />
? ? ? ? ? ? <span style="padding-left:4px;font-size:0.3rem">{{ data.name }}</span>
</span>注意：
這里用到了el-tree的懶加載所以沒有綁定data屬性。
懶加載代碼是：
el-tree標簽添加屬性和方法：
:props=“Props” lazy :load=“l(fā)oadNode”
data里聲明props：
Props: {
children: ‘children',
label: ‘name',
isLeaf: ‘leaf'
}在懶加載方法里，必須要給data定義icon屬性，指明圖標名稱。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點的方法
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
如果我們在每個組件中去重復定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
這篇文章主要介紹了在vue項目中使用Swiper插件詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文分步驟給大家介紹了Vue使用枚舉類型實現(xiàn)HTML下拉框的相關知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
這篇文章主要為大家介紹了vue3封裝echarts組件最佳形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
SCSS是一種CSS預處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,這篇文章主要給大家介紹了關于在vue項目中引入scss并使用scss樣式的相關資料,需要的朋友可以參考下2022-07-07
示對象存儲是騰訊云提供的一種存儲海量文件的分布式存儲服務，本文主要介紹了用vue.js實現(xiàn)圖片上傳功能，感興趣的小伙伴們可以參考一下2021-05-05
誤引用vuex-persistedstate導致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導致用戶信息無法清除問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了Vue 開發(fā)模式下跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06