iview 下拉select样式_iview实现select tree树形下拉框的示例代码

这篇文章主要为大家详细介绍了iview实现select tree树形下拉框的示例代码，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

本文介绍了iview实现select tree树形下拉框的示例代码，分享给大家，具体如下：

html部分

代码如下：

数据部分

代码如下：

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部分

代码如下：

// 子节点的option

renderContent (h, { root, node, data }) {

return h('Option', {

style: {

display: 'inline-block',

margin: '0'

},

props:{

value: data.value

}

}, data.title);

},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持512笔记。

注：关于iview实现select tree树形下拉框的示例代码的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js