iview實現(xiàn)select tree樹形下拉框的示例代碼
更新時間:2018年12月21日 15:57:22 作者:東方的神秘力量
這篇文章主要介紹了iview實現(xiàn)select tree樹形下拉框的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文介紹了iview實現(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é)點的option
renderContent (h, { root, node, data }) {
return h('Option', {
style: {
display: 'inline-block',
margin: '0'
},
props:{
value: data.value
}
}, data.title);
},
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue?cli3配置image-webpack-loader方式
這篇文章主要介紹了vue?cli3配置image-webpack-loader方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07
解決vue-cli-service不是內(nèi)部或外部命令也不是可運行的程序或批處理文件的報錯問題
這篇文章主要介紹了解決vue-cli-service不是內(nèi)部或外部命令也不是可運行的程序或批處理文件的報錯問題,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
Vue render渲染時間戳轉(zhuǎn)時間,時間轉(zhuǎn)時間戳及渲染進度條效果
這篇文章主要介紹了Vue render渲染時間戳轉(zhuǎn)時間,時間轉(zhuǎn)時間戳及渲染進度條效果,通過實例代碼相結(jié)合的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
Vue3+El-Plus實現(xiàn)表格行拖拽功能完整代碼
在vue3+elementPlus網(wǎng)站開發(fā)中,詳細完成el-table表格的鼠標拖拽/拖曳/拖動排序,下面這篇文章主要給大家介紹了關(guān)于Vue3+El-Plus實現(xiàn)表格行拖拽功能的相關(guān)資料,需要的朋友可以參考下2024-05-05

