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 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
简单的php购物车代码
2020/06/05 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
pyqt5自定义信号实例解析
2018/01/31 Python
使用Python处理BAM的方法
2018/09/28 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
给校长的建议书100字
2014/05/16 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2014年副班长工作总结
2014/12/10 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2015员工年度考核评语
2015/03/25 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
导游词之唐山景点
2019/12/18 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记