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！！！！！！！！

el-tree与el-transfer结合成树形穿梭框（tree-transfer）相关推荐

一个基于vue和element-ui的树形穿梭框组件
el-tree-transfer 简介因为公司业务使用vue框架,ui库使用的element-ui.在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之 ...
Vue使用基于element-ui的el-tree-fransfer树形穿梭框组件
el-tree-fransfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件,使用前请确认已经引入element-ui 官网npm文档:https://www.npmjs.com/ ...
tree结构穿梭 vue_结合el-tree和el-transfer搞一个树形穿梭框
最近遇到个需求,穿梭框中的内容是树形结构的数据.查看elementUI的transfer组件是不支持树形结构的数据,也就不能直接使用了.但是el-tree组件支持啊,那如果让tree组件和transf ...
vue项目手写树形穿梭框
背景:主流组件库提供的穿梭框并不能满足需求...手动封装扩展性更高功能: 具备首次进入页面,分配左右侧穿梭框展示(左侧为树形,右侧为一维数组) 选中左侧-节点(子节点)通过 >按钮可将选中节 ...
ThinkPHP5 集成使用 Layui 穿梭框（transfer）控件
背景最近在做后台业务处理时,接触到了 Layui 中的一个穿梭框 transfer 控件的使用: 个人觉得效果还是挺满意的: 但是毕竟是在 ThinkPHP5 框架下进行的集成,不能不适合部分同行理 ...
使用element-ui实现树形穿梭框
<template><div class="transferTreeBox"><div class=&quo ...
在vue项目中使用树形结构的穿梭框
先看一下最后的效果: 一个基于elementui的穿梭框组件:el-tree-transfer 第一步:安装组件 npm install el-tree-transfer --save 第二步:写代码 ...
vue项目使用树形数据穿梭框
文档地址:快速进入基本步骤代码: npm install el-tree-transfer --save //下载依赖import treeTransfer from 'el-tree-transf ...
javascript将平行的拥有上下级关系的数据转换成树形结构
下载地址 csdn下载地址服务端数据存储当有多级菜单或者多级部门这样的场景的时候,传统的结构化数据设计都会用类似parentId来标识其父级,以达到多级树形结构存储于数据库中服务端提供接口服务 ...

el-tree与el-transfer结合成树形穿梭框（tree-transfer）

下载

注意：

el-tree与el-transfer结合成树形穿梭框（tree-transfer）相关推荐

最新文章

热门文章