1. 效果图

2. 实现:   三级(部门或人员的树形选择)

3. 模拟数据说明:  fake.js

  

  name:  显示的名称(同时也是源码中 for 循环单一的key ,  如果真实数据存在名字有重复的情况, 建议加入ID字段作为主键)

  type:  department 为部门   human 为个人

  children: 数据类型必须为 数组,   type 为 human 个人时, 值为空数组 [],  为department 部门时   值为对象 或者为空数组

  以上4个键为必须, 最多三级嵌套

4. 源码 https://github.com/IceGogh/vue-components

5. 直接引入时, 将父组件的真实数据 通过props方式 传入  organization组件

  

  5.1.文件位置:

  components/OrganizationTree

  5.2. 引入

  import Organ from "@/components/OrganizationTree"

  5.3.调用

  <organization-tree dataList:"dataArray"></organization-tree>

vue2.0 组织机构树形选择组件(类似elementui <el-transfer> 与 <el-tree> 两个标签的结合)的更多相关文章

  1. Vue2.0表单校验组件vee-validate的使用

    vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...

  2. Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  3. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  4. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  5. Vue2.0如何实现父组件与子组件之间的事件发射与接收

    关于vue2.0的事件发射和接收,大家都知道$dispatch和$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都 ...

  6. vue2.0的瀑布流组件-使用说明

    做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import v ...

  7. Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  8. jeecgboot-vue3笔记(九)——treeSelect树形选择组件的使用(异步加载)

    使用效果 初始化加载顶层节点,点击各层的>加载该节点的子节点,加载后>标识去除不再重复加载. 前端代码 vue ant-design组件 tree-data,树节点,children方式或 ...

  9. 基于vue2.0的一个分页组件

    分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...

随机推荐

  1. Logger之Logger.getLogger(CLass)技巧代替system.out.print

    ---恢复内容开始--- 尊重原创:http://www.cnblogs.com/zxf330301/p/5876117.html 之前一直在使用System.out.println()来调试.但是用 ...

  2. 电铸3D18K硬金 电铸易熔合金 电铸中空硬金饰品合金

        俊霖电铸3DK金易熔合金是要求相互关连,互为条件,缺一不可,是产品完整性和完美性的重要体现.    第一.适用性:电铸3DK金易熔合金的性能应适用于电铸.首饰.K金饰品.摆件等工艺品的易熔合金 ...

  3. PhpStorm中如何使用Xdebug工具,入门级操作方法

    http://blog.csdn.net/knight_quan/article/details/51953269 1.简介: PhpStorm是一个轻量级且便捷的PHP IDE,其提供的智能代码补全 ...

  4. 使用phpMyAdmin批量修改Mysql数据表前缀的方法

    多个网站共用一个Mysql数据库时,为使数据库管理不混乱,一般采用不同的网站使用不同前缀名的方式进行区分.而如何批量修改已有数据库的前缀名呢?全部导出修改后再导入?还是一个表一个表的修改?今天我要介绍 ...

  5. 基于VUE的九宫格抽奖功能

    HTML代码: <template> <div class="luckDraw"> <title-bar :title="title&quo ...

  6. 关于JWPlayer播放器的一些测试学习

    <!DOCTYPE html><html><head> <title>jwplayer播放器测试</title> <script ty ...

  7. [知了堂学习笔记]_ajax的两种使用方式

    一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都 ...

  8. linux 中nvme 的中断申请及处理

    /** * struct irq_desc - interrupt descriptor * @irq_data: per irq and chip data passed down to chip ...

  9. _0_web_基础

    创:18_3_2017修:20_3_2017 什么是前端? --在浏览器中展示内容以及处理请求 什么是浏览器? --一款能将网页内容展现给用户查看,并且让用户与网页交互的软件 什么是内核? --渲染引 ...

  10. 用MapViewOfFile处理大文件-内存不足

    用MapViewOfFile处理大文件时,如果文件过大,如400M,则无法一次性映射入内存,否则会出现1132错误,即内存不足.原因可能为操作系统无法找到连续的内存.因此需要通过分页的方式,逐页将文件 ...