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的懶加載所以沒有綁定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)文章

vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
Vue mixins混入使用解析
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧
2023-02-02
在vue項(xiàng)目中使用Swiper插件詳解
這篇文章主要介紹了在vue項(xiàng)目中使用Swiper插件詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue中transition單個(gè)節(jié)點(diǎn)過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個(gè)節(jié)點(diǎn)過渡與transition-group列表過渡全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue使用枚舉類型實(shí)現(xiàn)HTML下拉框步驟詳解
本文分步驟給大家介紹了Vue使用枚舉類型實(shí)現(xiàn)HTML下拉框的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-02-02
vue3封裝echarts組件最佳形式詳解
這篇文章主要為大家介紹了vue3封裝echarts組件最佳形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
在vue項(xiàng)目中引入scss并使用scss樣式詳解
SCSS是一種CSS預(yù)處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,這篇文章主要給大家介紹了關(guān)于在vue項(xiàng)目中引入scss并使用scss樣式的相關(guān)資料,需要的朋友可以參考下
2022-07-07
vue.js云存儲(chǔ)實(shí)現(xiàn)圖片上傳功能
示對(duì)象存儲(chǔ)是騰訊云提供的一種存儲(chǔ)海量文件的分布式存儲(chǔ)服務(wù)，本文主要介紹了用vue.js實(shí)現(xiàn)圖片上傳功能，感興趣的小伙伴們可以參考一下
2021-05-05
誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
詳解Vue 開發(fā)模式下跨域問題
本篇文章主要介紹了Vue 開發(fā)模式下跨域問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06