本文介绍了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);
- },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。