1.首先在组件中引入el-tree-transfer

2.然后在template中使用注册后的组件

  1. 参数:title 说明:标题 类型:Array 必填:false 默认:["源列表", "目标列表"]
  2. 事件:left-check-change 说明:左侧源数据勾选事件 回调参数:function(nodeObj, treeObj)见el-tree组件check事件返回值
  3. 事件:right-check-change 说明:右侧目标数据勾选事件 回调参数:function(nodeObj, treeObj)见el-tree组件check事件返回值
  4. 参数:from_data 说明:源数据 类型:Array 必填:true 补充:数据格式同element-ui tree组件,但必须有id和pid
  5. 参数:to_data 说明:目标数据 类型:Array 必填:true 补充:数据格式同element-ui tree组件,但必须有id和pid
  6. 参数:defaultProps 说明:配置项-同el-tree中props 必填: false 补充:用法和el-tree的props一s样
  7. 监听穿梭组件的添加和移除
  8.  // 监听穿梭框组件添加
    addBth(fromData,toData,obj){
    // 树形穿梭框模式transfer时,返回参数为左侧树移动后数据、右侧树移动后数据、移动的 {keys,nodes,halfKeys,halfNodes}对象
    // 通讯录模式addressList时,返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
    console.log("fromData:", fromData);
    console.log("toData:", toData);
    console.log("obj:", obj);
    },
    // 监听穿梭框组件移除
    removeBth(fromData,toData,obj){
    // 树形穿梭框模式transfer时,返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
    // 通讯录模式addressList时,返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
    console.log("fromData:", fromData);
    console.log("toData:", toData);
    console.log("obj:", obj);
    }
  9. 参数:mode 说明:设置模式,字段可选值为transfer|addressList 类型:String 必填:false 补充:mode默认为transfer模式,即树形穿梭框模式,可配置字段为addressList改为通讯录模式,通讯录模式时按钮不可自定义名字,如要自定义标题名在title数组传入四个值即可,addressList模式时标题默认为通讯录、收件人、抄送人、密送人
  10. 参数:filter 说明:是否开启筛选功能 类型:Boolean 必填:false
  11. 参数:openAll 说明:是否默认展开全部 类型:Boolean 必填:false

这是我使用的几个参数和方法,做一下介绍,具体观看:https://segmentfault.com/a/1190000015553081

3.接下来就需要使用props传值啦,需要两个参数一个是ismentrees2(组件的显示隐藏)toData(回显的数据)

4.初始化的时候,请求数据,判断是否需要右侧回显数据

依赖没有回显,so,在请求后数据后,先做一个判断组件右侧是否有数据,有的话,(_this.toData.length > 0)  做了一下去重,当左右侧数据相等的时候(_this.toData == data),右侧的数据为空,当没有选中的数据时,左侧的源数据正常显示,

5.接下来是监听添加和移除数据,然后保存到页面中

这个tree组件就算完成,接下来就是在页面中使用啦

import tree from '@/components/subassembly/tree'; // 参与人员

 components:{
   tree
  }

<tree @setmentree2="setmentree2" :toData="toData" @setmentdata2="setmentdata2" v-if="mentree2" ></tree>   

// setmentree2 是tree组件的显示隐藏

// toData 是右侧选中的数据

// setmentdata2   处理组件返回的数据到页面中

由于给后台传值传的是字符串,前端需要一个数组来显示,所以,做了一下数据处理

最后效果图一份

使用el-tree-transfer的方式的更多相关文章

  1. J2EE 中 用 El表达式 和 Jsp 方式 取得 URL 中的参数方法

    使用 el表达式方法: var urlParamValue = "${param.urlVarName}"; 使用 Jsp 表达式 var urlParamValue2 = &qu ...

  2. 零拷贝传输(zero-copy transfer)——sendfile()

    做Web服务器时通常需要将文件传送出去,其中一种方法是通过定义一个buffer每次读取文件发送给接收端.大多数服务器会选择sendfile的方式,nginx实现时就是采用这种方式.对于并发搞得服务器性 ...

  3. EL表达式与JSTL

    内容包括 EL表达式 EL函数库 JSTL 核心标签库 格式化标签库 SQL标签库 XML标签库 自定义标签库 EL表达式 EL是Expression Language的是缩写,是JSP页面编写的一种 ...

  4. EL表达式学习

    EL表达式取值 1.EL表达式的语法格式很简单: 以前编写jsp代码时,如果要获取表单中的用户名,一般使用 <%=request.getParameter("name")%& ...

  5. 红黑树(red-black tree)实现记录

    https://github.com/xieqing/red-black-tree A Red-black Tree Implementation In C There are several cho ...

  6. EL表达式的特性

    一.EL(Expression Language)表达式语言一.作用:从作用域中取值,再将值显示给客户 二.目的:在JSP中消灭java代码 三.使用:<%@ page isELIgnored= ...

  7. Tomcat报failed to parse the expression [${xxx}]异常(javax.el.ELException)的解决方法

    Tomcat 7 'javax.el.ELException' 的解决方式tomcat 7对EL表达式的语法要求比较严格,例如"${owner.new}"因包含关键字new就会导致 ...

  8. 5: EL 表达式小结

    1.EL表达式的语法格式很简单: 以前编写jsp代码时,如果要获取表单中的用户名,一般使用  <%=request.getParameter("name")%> ,这样 ...

  9. 使用jstl+el表达式遇到的几个问题

    1.使用jstl访问Map<Integer,String>中的内容时总取不到? el表达式的一个bug,在解析数字的时候,会自动将数字转换成Long类型. 我的解决办法是,Map的key改 ...

  10. JDOM,dom4j方式解析XML

    <?xml version="1.0" encoding="UTF-8"?> <dataSources> <!-- 定义MySQL ...

随机推荐

  1. java 注释与标识符

    JAVA基础 注释与标识符 注释 书写注释是一个非常好的习惯 三种注释: 单行,多行,文档 .单行 ://注释 .多行:/* 注释 / .文档** 注释 */ 标识符 1. 关键字 2.标识符注意点 ...

  2. PHP 的网站主要攻击方式有哪些?

    1.命令注入(Command Injection)2.eval 注入(Eval Injection)3.客户端脚本攻击(Script Insertion)4.跨网站脚本攻击(Cross Site Sc ...

  3. 小程序base64图片格式保存至手机相册

    // 保存图片至相册 saveImg() { //获取文件管理器对象 const fs = wx.getFileSystemManager() //文件保存路径 const Imgpath = wx. ...

  4. JavaScript闭包的概念及用法

    1.闭包的概念: 闭包就是能够读取其他函数内部变量的函数. 例如: function f1(){ var n=999; function f2(){ alert(n); } return f2; } ...

  5. python学习之matplotlib实战2

    import numpy as np import matplotlib.pyplot as plt def main(): #scatter fig = plt.figure() ax = fig. ...

  6. JavaWeb之Servlet、拦截器、监听器及编程思想

    本文包含的内容有: Servlet的理解 自定义Servlet.监听器和过滤器 三者的一点点编程设计思想 后续的学习 JavaWeb是Web开发的重要基础,对Servlet.监听器和过滤器等知识的掌握 ...

  7. Spfa 求含负权边的最短路 + 判断是否存在负权回路

    在Bellman-Ford算法之后,我们总算迎来了spfa算法,其实就如同堆优化Dijkstra算法之于朴素版Dijkstra算法,spfa算法仅仅是对Bellman-Ford算法的一种优化,但是在形 ...

  8. Java基础——抽象类

    一.概述: 在Java中,一个没有方法体的方法应定义为抽象方法在public 修饰符后加 abstract修饰符,而类中如果有抽象方法,该类必须定义为抽象类在public 修饰符后加 abstract ...

  9. [XMAN筛选赛](web)ctf用户登录

    0x00 题目概述 就只写了几道web题,有些考察点比较明显,所以个人感觉来说web总体不难. 一航的writeup写得差不多,我这写个他没写的wirteup. 看题: 链接点进去是一个登录页面,习惯 ...

  10. Excel批量转Word

    平时的工作中,尤其是一些文职类工作中,常会遇到这样的问题: 我们有一个Excel文件,每一行都是一个人的信息,需要将每个人的信息填写到Word表格中:一个人,一张表,一个下午,真烦恼. 也是奇想突发, ...