el-tree与el-transfer结合成树形穿梭框(tree-transfer)

下载
npm install el-tree-transfer --save
<tree-transfer :title="['模块(菜单)访问权限', '拥有的操作权限']":from_data='fromData':to_data='toData':defaultProps="{label:'label', children: 'children'}"@addBtn='add'@removeBtn='remove':mode='mode':pid="parentId":style="{height: '75%'}"filteropenAll></tree-transfer>
import treeTransfer from 'el-tree-transfer' 
export default {components:{ treeTransfer },data(){return{parentId: 'parentId',mode: "transfer",fromData: [{id: "1",parentId: 0,label: "房源综合业务管理平台",children: [{id: "1-1",parentId: "1",label: "首页",children: []},{id: "1-2",parentId: "1",label: "房源信息管理系统",children: [{id: "1-2-1",parentId: "1-2",children: [],label: "数据统计"},{id: "1-2-2",parentId: "1-2",children: [],label: "房源信息管理"},{id: "1-2-3",parentId: "1-2",children: [],label: "房源入库管理"}]}]}],toData:[]}},methods:{// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressListchangeMode() {if (this.mode == "transfer") {this.mode = "addressList";} else {this.mode = "transfer";}},// 监听穿梭框组件添加add(fromData,toData,obj){console.log("fromData:", fromData);console.log("toData:", toData);console.log("obj:", obj);},// 监听穿梭框组件移除remove(fromData,toData,obj){console.log("fromData:", fromData);console.log("toData:", toData);console.log("obj:", obj);}},
}
注意:

1, 标题 类型:Array 必填:false 默认:[“源列表”, “目标列表”]
2,设置模式,字段可选值为transfer|addressList 类型:String 必填:false 补充:mode默认为transfer模式,即树形穿梭框模式,可配置字段为addressList改为通讯录模式,通讯录模式时按钮不可自定义名字,如要自定义标题名在title数组传入四个值即可,addressList模式时标题默认为通讯录、收件人、抄送人、密送人
3,源数据 类型:Array 必填:true 补充:数据格式同element-ui tree组件,但必须有id和pid!!!!!!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354290.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kickstart_具有Java Kickstart的MongoDB

kickstartNoSQL数据库由于其可伸缩性而变得越来越流行。 适当使用时 NoSQL数据库可以提供真正的好处。 MongoDB是使用C 编写的高度可扩展的开源NoSQL数据库。 1.安装MongoDB 您可以按照所使用的操作系统&#xff0c;按照MongoDB官方网站上的说明安装MongoDB&#xff0c;而不会…

DataGuard之DG环境搭建

DG 环境搭建 1.设置归档模式 DG环境的搭建必须要把数据库启动到归档模式&#xff0c;并且为了避免开发人员使用nologging语句&#xff0c;我们还要把数据库设置为force logging。 查看数据库是否运行在归档模式&#xff1a; #su - oracle $sqlplus / as sysdba SQL>archive…

关于抢红包的_关于抢红包的话题800字作文

随着互联网的发展,一些习惯正在我们身边悄悄形成。例如&#xff1a;抢红包&#xff0c;今天学习啦小编为大家精心挑选了关于抢红包的话题800字作文&#xff0c;希望能够很好的帮助到大家。关于抢红包的话题800字作文篇1红包&#xff0c;装得下钞票&#xff0c;却载不动细腻的亲…

uView(Tabbar 底部导航栏)

&#xff08;一&#xff09;第一种方式 1&#xff0c;每个菜单页面都要 “首页” “发布” “我的” 每个页面都要 <template><view>首页<u-tabbar:list"tabBar" change"changeEvent()" bg-color"rgb(51, 61, 73)"active-colo…

了解有关JDK9紧凑弦乐的信息(视频回顾Charlie Hunt)

JDK 9引入了一个称为紧凑字符串的新功能。 鉴于Java程序中普遍存在字符串&#xff0c;我认为这是一个非常重要的更改&#xff0c;所有Java开发人员都必须理解。 在此视频中&#xff0c;查理亨特&#xff08;Charlie Hunt&#xff09;解释了此新功能的历史和实现。 该视频实际上…

a算法解决八数码问题_javascript,八皇后问题解决

八皇后问题 八皇后问题&#xff0c;是一个古老而著名的问题&#xff0c;是回溯算法的典型案例。 该问题是国际西洋棋棋手马克斯贝瑟尔于1848年提出&#xff1a; 在88格的国际象棋上摆放八个皇后&#xff0c;使其不能互相攻击&#xff0c; 即&#xff1a;任意两个皇后都不能处于…

vue项目中使用mock(二)

一&#xff0c;安装&#xff1a; npm install mockjs --save-dev目录&#xff1a; src 同级目录下新建 mock 文件夹 下 新建 mock.js 和 tags.js 文件 二&#xff0c;main.js 中导入&#xff1a; require(/mock/mock.js)三&#xff0c;mock.js 文件&#xff1a; const Moc…

CentOS6.9部署zabbix3.0监控系统

环境&#xff1a; [rootredis ~]# uname -a Linux redis 2.6.32-696.el6.x86_64 #1 SMP Tue Mar 21 19:29:05 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux [rootredis ~]# cat /etc/redhat-release CentOS release 6.9 (Final) [rootredis ~]# getenforce Disabled [rootredis …

输出整形变量语句_Python合集之Python变量

在上一节的合集中&#xff0c;我们了解了Python的保留字与标识符&#xff0c;本节我们将进一步了解一下Python中关于变量的问题。变量严格意义上来讲应该称之为“名称”&#xff0c;也可以理解为标签。在Python中&#xff0c;不需要先声明变量名及其数据类型&#xff0c;直接赋…

FormData使用方法详解

FormData的主要用途有两个&#xff1a; 1、将form表单元素的name与value进行组合&#xff0c;实现表单数据的序列化&#xff0c;从而减少表单元素的拼接&#xff0c;提高工作效率。 2、异步上传文件 一、创建formData对象 1、创建一个空对象&#xff1a; //通过FormData构造函…

IKVM:java代码c#调用

在工作中遇到对接java接口&#xff0c;涉及到java加密或签名问题&#xff0c;.net无法实。就将java代码编辑为dll给.net调用 注&#xff1a;这里只做简单java代码处理&#xff0c;不涉及到复杂的java包 java文件处理&#xff1a; 第一步:简单java代码 package com.zht;//c#命名…

activemq 连接_ActiveMQ网络连接器

activemq 连接这篇文章对我以及对ActiveMQ的网络连接器的工作方式可能感兴趣的任何ActiveMQ贡献者都适用。 我最近花了一些时间查看代码&#xff0c;并认为最好画一些快速的图表来帮助我记住我学到的知识&#xff0c;并在将来发现问题时帮助将来确定在哪里进行调试。 如果我输入…

如何让fragment刷新界面_快速实现android版抖音主界面的心得

原文作者&#xff1a;DK_BurNIng如何快速确定竞品某个界面的实现方式&#xff1f;当你收到产品一个需求是模仿某个竞品且时间很短没有过多时间给你调研技术方案的时候&#xff0c;如何尽快确定这个功能的技术方案呢&#xff1f; 这里我给出我自己的一个小窍门&#xff0c;可以避…

js的深浅拷贝( 赋值后原值被覆盖的问题 )

1&#xff0c;浅拷贝&#xff08; 浅拷贝会复制所有引用对象的指针&#xff0c;而不是具体的值 &#xff09; 复制对象的所有属性都不是引用类型时&#xff0c;就可以使用浅拷贝 浅拷贝方式&#xff1a; Object.assign() [].slice()2&#xff0c;深拷贝&#xff08; 复制一个…

使用JBoss Cool Store的终极云零售指南

我们一直在讨论为什么应用程序开发人员在App Dev Cloud Stack系列中不能再忽略其堆栈了。 带有JBoss Cool Store的App Dev Cloud 我们从头到尾讨论了各个层&#xff0c;但尚未为您提供除Red Hat Container Development Kit&#xff08;CDK&#xff09;之外的任何应用程序开发…

02.Python 3.6.4下载与安装

02.Python 3.6.4下载与安装 https://www.python.org/downloads/release/python-364/ Windows x86-64可执行文件安装程序视窗对于AMD64 / EM64T / x64&#xff0c;不是安腾处理器bee5746dc6ece6ab49573a9f54b5d0a131684744SIG我下载的是这个&#xff1a; https://www.python.or…

根据浏览器navigator区分PC端还是移动端,区分操作系统,区分浏览器型号

1&#xff0c;区分PC端还是移动端 methods:{_isMobile() {let flag navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)return flag;}, }, m…

mysql 用户授权_mysql添加、删除用户和授权用户

MySql中添加用户,新建数据库,用户授权,删除用户,修改密码(注意每行后边都跟个;表示一个命令语句结束):1.新建用户1.1 登录MYSQL&#xff1a;>mysql -u root -p>密码1.2 创建用户&#xff1a;mysql> insert into mysql.user(Host,User,Password) values("localhos…

2018年1月 常用的linux命令

项目中经常用到的Linux命令 &#xff08;注意&#xff1a;linux命令要小写哦&#xff01;&#xff09; &#xff08;1&#xff09;、ls 显示当前目录下的文件 &#xff08;2&#xff09;、vi vim 进入编辑器&#xff0c;可以选择你要编辑的文档&#xff0c;一般我们将项目打…

vue-element-admin中 vuex 的使用

vue-element-admin 中 vuex 是模块化的。 登录流程 1&#xff0c;HTTP 配置&#xff08;utils/request.js&#xff09; 2&#xff0c;API 配置&#xff08;api/user.js&#xff09; import request from /utils/requestexport function login(username, password) {return …