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 相关文章推荐
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
Boostrap入门准备之border box
May 09 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
vue操作dom元素的3种方法示例
Sep 20 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP实现图片压缩
2020/09/09 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
Python中标准模块importlib详解
2017/04/16 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
医学院学生的自我评价分享
2013/11/19 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python