iview實(shí)現(xiàn)select tree樹形下拉框的示例代碼
更新時(shí)間：2018年12月21日 15:57:22 作者：東方的神秘力量
這篇文章主要介紹了iview實(shí)現(xiàn)select tree樹形下拉框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文介紹了iview實(shí)現(xiàn)select tree樹形下拉框的示例代碼，分享給大家，具體如下：
html部分
<Tree :data="treeData" ref="tree" :render="renderContent"></Tree>
數(shù)據(jù)部分
export const treeData= [
{
title: 'parent 1',
expand: true,
selected: true,
value: '1',
children: [
{
title: 'parent 1-1',
expand: true,
value: '11',
children: [
{
value: '111',
title: 'leaf 1-1-1'
},
{
value: '112',
title: 'leaf 1-1-2'
}
]
},
{
title: 'parent 1-2',
value: '12',
expand: true,
children: [
{
value: '121',
title: 'leaf 1-2-1'
},
{
value: '122',
title: 'leaf 1-2-2'
}
]
}
]
}
];
js部分
// 子節(jié)點(diǎn)的option
renderContent (h, { root, node, data }) {
return h('Option', {
style: {
display: 'inline-block',
margin: '0'
},
props:{
value: data.value
}
}, data.title);
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue3中useLocalStorage用法的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解一下2023-10-10
這篇文章主要介紹了vue 設(shè)置背景顏色及透明度的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
本文主要介紹了解決vue.js not detected的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)
這篇文章主要介紹了IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
Vue3中provide和inject作用和場(chǎng)景
Vue3中provide和inject作用和場(chǎng)景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過實(shí)例介紹Vue3 provide和inject的相關(guān)知識(shí),感興趣的朋友一起看看吧2023-11-11
Element-UI 解決el-table中圖片懸浮被遮擋問題小結(jié)
在開發(fā)中,發(fā)現(xiàn)element-ui在el-table中添加圖片懸浮顯示時(shí),會(huì)被單元格遮擋的問題,對(duì)于此問題解決其實(shí)也并不難,將懸浮圖片放在body節(jié)點(diǎn)下,通過定位顯示即可,感興趣的朋友跟隨小編一起看看吧2024-06-06
父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然后在父組件中通過 v-bind 綁定相應(yīng)的數(shù)據(jù)來傳遞數(shù)據(jù)，這篇文章主要介紹了Vue?組件之間傳值的方法,需要的朋友可以參考下2023-12-12
vue項(xiàng)目常用組件和框架結(jié)構(gòu)介紹
這篇文章通過圖文形式給大家介紹了vue項(xiàng)目的骨架及常用組件的相關(guān)知識(shí)，對(duì)此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。2017-12-12
這篇文章主要為大家介紹了antd的選擇框如何增加tab選中的方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11