vue中的el-tree @node-click傳自定義參數(shù)
更新時(shí)間：2022年08月15日 15:45:34 作者：成長(zhǎng)中...
這篇文章主要介紹了vue中的el-tree @node-click傳自定義參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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為默認(rèn)參數(shù)
?? ?console.log(node)
?? ?console.log(item)
?? ?console.log(param) ? ?// param為自定義的參數(shù)
}給el-tree添加自定義圖標(biāo)
<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標(biāo)簽里添加：
<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的懶加載所以沒(méi)有綁定data屬性。
懶加載代碼是：
el-tree標(biāo)簽添加屬性和方法：
:props=“Props” lazy :load=“l(fā)oadNode”
data里聲明props：
Props: {
children: ‘children',
label: ‘name',
isLeaf: ‘leaf'
}在懶加載方法里，必須要給data定義icon屬性，指明圖標(biāo)名稱。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3使用ref的性能警告問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue實(shí)現(xiàn)消息無(wú)縫滾動(dòng)效果
這篇文章介紹了vue實(shí)現(xiàn)消息無(wú)縫滾動(dòng)效果的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue的props配置項(xiàng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
路由導(dǎo)航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導(dǎo)航過(guò)程中進(jìn)行攔截和控制,其中,beforeEach 導(dǎo)航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧2023-10-10
vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)
這篇文章主要介紹了vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解基于webpack和vue.js搭建開(kāi)發(fā)環(huán)境
本篇文章主要介紹了詳解基于webpack和vue.js搭建開(kāi)發(fā)環(huán)境 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Vue實(shí)現(xiàn)移動(dòng)端日歷的示例代碼
工作中遇到一個(gè)需求是根據(jù)日歷查看某一天/某一周/某一月的睡眠報(bào)告，但是找了好多日歷組件都不是很符合需求，只好自己手寫一個(gè)日歷組件，順便記錄一下，希望對(duì)大家有所幫助2023-04-04
Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié))
這篇文章主要介紹了Vue 通過(guò)自定義指令回顧v-內(nèi)置指令(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)
這篇文章主要介紹了vue兩個(gè)輸入框聯(lián)動(dòng)校驗(yàn)方式(最大值-最小值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Slots Emit和Props穿透組件封裝實(shí)現(xiàn)摸魚加鐘
這篇文章主要為大家介紹了Slots Emit和Props穿透組件封裝實(shí)現(xiàn)示例詳解，為摸魚加個(gè)鐘，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08