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

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

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

html部分

<Tree :data="treeData" ref="tree" :render="renderContent"></Tree>

数据部分

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);
 },

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