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 动态加载脚本的4种方法
May 05 Javascript
了解一点js的Eval函数
Jul 26 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
Vue组件实现触底判断
Jun 26 Javascript
Vue插件之滑动验证码用法详解
Apr 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
论建造顺序的重要性
2020/03/04 星际争霸
一个程序下载的管理程序(四)
2006/10/09 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python机器学习实战之K均值聚类
2017/12/20 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
创业计划书怎样才能打动风投
2014/01/01 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
英语教研活动总结
2014/07/02 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
为Centos安装指定版本的Docker
2022/04/01 Servers
Redis 异步机制
2022/05/15 Redis
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android