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

 更新时间:2018年12月21日 15:57:22   作者:东方的神秘力量  
这篇文章主要介绍了iview实现select tree树形下拉框的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

相关文章

  • VUE 组件转换为微信小程序组件的方法

    VUE 组件转换为微信小程序组件的方法

    这篇文章主要介绍了VUE 组件转换为微信小程序组件的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue2中的过滤器filter使用及注意说明

    Vue2中的过滤器filter使用及注意说明

    这篇文章主要介绍了Vue2中的过滤器filter使用及注意说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中key使用的问题示例解析

    vue中key使用的问题示例解析

    这篇文章主要为大家介绍了vue中key使用的问题示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue 实现把路由单独分离出来

    vue 实现把路由单独分离出来

    这篇文章主要介绍了vue 实现把路由单独分离出来,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Electron进程间通信的实现

    Electron进程间通信的实现

    本文主要介绍了Electron进程间通信的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Vue实现红包雨小游戏的示例代码

    Vue实现红包雨小游戏的示例代码

    红包也叫压岁钱,是过农历春节时长辈给小孩儿用红纸包裹的礼金。本文将通过Vue制作一个红包雨小游戏,文中的示例代码讲解详细,需要的可以参考一下
    2022-01-01
  • 如何利用Vue3+Element Plus实现动态标签页及右键菜单

    如何利用Vue3+Element Plus实现动态标签页及右键菜单

    标签页一般配合菜单实现,当你点击一级菜单或者二级菜单时,可以增加对应的标签页,当你点击对应的标签页,可以触发对应的一级菜单或者二级菜单,下面这篇文章主要给大家介绍了关于如何利用Vue3+Element Plus实现动态标签页及右键菜单的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue中的依赖注入provide和inject简单介绍

    vue中的依赖注入provide和inject简单介绍

    这篇文章主要介绍了vue中的依赖注入provide和inject简单介绍,provide 选项允许我们指定我们想要提供给后代组件的数据/方法,本文通过组价刷新的案列给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • vue中使用jquery滑动到页面底部的实现方式

    vue中使用jquery滑动到页面底部的实现方式

    这篇文章主要介绍了vue中使用jquery滑动到页面底部的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue实现二维码扫码功能(带样式)

    vue实现二维码扫码功能(带样式)

    最近接了一个移动端的项目,实现微信扫码功能,今天小编利用这个平台给大家分享vue实现二维码扫描功能的实现代码,需要的朋友参考下吧
    2021-08-08

最新评论