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


Posted in Javascript onDecember 21, 2018

本文介绍了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);
    },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 读取图片文件的大小
Jun 25 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
理解Javascript图片预加载
Feb 23 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
js编写简单的计时器功能
Jul 15 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
Element input树型下拉框的实现代码
Dec 21 #Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 #Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 #Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 #Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 #Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 #Javascript
angularjs http与后台交互的实现示例
Dec 21 #Javascript
You might like
PHP面向对象编程快速入门
2006/12/14 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP引用返回用法示例
2016/05/28 PHP
jQuery 表格工具集
2010/04/25 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Python中property函数用法实例分析
2018/06/04 Python
python实现键盘输入的实操方法
2019/07/16 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
南京某公司笔试题
2013/01/27 面试题
与UNIX有关的几个名词
2015/09/17 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
工厂厂长岗位职责
2013/11/08 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
上课说话检讨书
2015/01/27 职场文书
婚宴邀请函
2015/01/30 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS