一个基于vue和element-ui的树形穿梭框及邮件通信录
一个基于vue和element-ui的树形穿梭框及邮件通信录。
github原文连接: github.com/hql7/tree-t…vue
1.先下载插件
npm install el-tree-transfer --save
复制代码
2.vue代码(部分)
<!-- 使用树形穿梭框组件 -->
<tree-transfer :from_data='fromData' :title='title' :to_data='toData'
:defaultProps="{label:'name'}" :pid='parentId'
@addBtn='add' @removeBtn='remove'
:mode='mode' height='340px' filter openAll
>
</tree-transfer>
复制代码
import treeTransfer from 'el-tree-transfer' // 引入
复制代码
//树形穿梭框数据
mode: "transfer", // transfer addressList
parentId: 'parentId',
title: ['功能类别','功能权限'],
fromData:[],
toData:[],
复制代码
//注册组件
components: {
treeTransfer
},
复制代码
/** 方法 start */
//获取树形数据
getPermissionTree() {
let param = {
roleId: '',
sysId: ''
}
permissionTree(param).then(res => {
if(res.code == 0){
console.log(res.data)
this.fromData = res.data.children;
}else{
this.$message({
message: res.msg,
type: 'warning'
})
}
})
},
// 切换模式 现有树形穿梭框模式transfer 和通信录模式addressList
changeMode() {
if (this.mode == "transfer") {
this.mode = "addressList";
} else {
this.mode = "transfer";
}
},
// 监听穿梭框组件添加
add(fromData,toData,obj){
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通信录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console.log("fromData:", fromData);
console.log("toData:", toData);
console.log("obj:", obj);
//递归遍历树形结构
function getRoleId(obj){
for(var i in obj){
//输出每一个节点id
console.log(obj[i].id)
if(obj[i].children){
//若是存在子树,递归调用函数
getRoleId(obj[i].children)
}
}
}
getRoleId(toData)
},
// 监听穿梭框组件移除
remove(fromData,toData,obj){
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通信录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console.log("fromData:", fromData);
console.log("toData:", toData);
console.log("obj:", obj);
}
/** 方法 end */
复制代码
3.树形数据结构
{
"code":"0",
"data":{
"children":[
{
"children":[
{
"collected":false,
"createTime":"2019-10-30 23:42:56",
"desc":"角色管理",
"icon":"http://192.168.3.20/group1/M00/00/37/wKgDFF2wPiiARsaJAAAu6pZE5A8893.png",
"id":219,
"modifyTime":"2019-10-30 23:44:25",
"name":"角色管理",
"parentId":1,
"permission":"role:page",
"sysId":1
}
],
"collected":false,
"createTime":"2019-10-15 18:02:01",
"desc":"用户管理",
"icon":"http://192.168.3.20/group1/M00/00/37/wKgDFF2wPiiARsaJAAAu6pZE5A8893.png",
"id":1,
"modifyTime":"2019-10-26 01:25:25",
"name":"用户管理",
"parentId":0,
"permission":"usermanagement:page",
"sysId":1,
"url":"/#/usermanagement"
},
{
"collected":false,
"createTime":"2019-10-18 01:50:16",
"desc":"发布节目",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_CeAR8BdAAAbGDTayng433.png",
"id":6,
"modifyTime":"2019-10-26 01:25:40",
"name":"发布节目",
"parentId":0,
"permission":"releaseprogram:page",
"sysId":1,
"url":"/#/releaseprogram"
},
{
"children":[
{
"collected":false,
"createTime":"2019-10-18 01:53:24",
"desc":"学生信息",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_DiAAxZHAAAhYmLGJZw271.png",
"id":8,
"modifyTime":"2019-10-26 01:25:46",
"name":"学生信息",
"parentId":7,
"permission":"students:page",
"sysId":1,
"url":"/#/customized/students"
},
{
"collected":false,
"createTime":"2019-10-18 01:53:29",
"desc":"班级信息",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_EKAfXtGAAAivGUk2Ds368.png",
"id":9,
"modifyTime":"2019-10-26 01:26:26",
"name":"班级信息",
"parentId":7,
"permission":"classInfo:page",
"sysId":1,
"url":"/#/customized/classInfo"
},
{
"collected":false,
"createTime":"2019-10-18 01:53:29",
"desc":"班级荣誉",
"icon":"http://192.168.3.20/group1/M00/00/39/wKgDFF24FOiAJP01AAAye6tm83g117.png",
"id":10,
"modifyTime":"2019-10-30 02:31:05",
"name":"班级荣誉",
"parentId":7,
"permission":"classHonor:page",
"sysId":1,
"url":"/#/customized/classHonor"
},
{
"collected":false,
"createTime":"2019-10-18 01:53:30",
"desc":"学习标兵",
"icon":"http://192.168.3.20/group1/M00/00/39/wKgDFF24Ff2AQCRZAAAWXgURDWQ225.png",
"id":11,
"modifyTime":"2019-10-30 02:35:43",
"name":"学习标兵",
"parentId":7,
"permission":"modelStudents:page",
"sysId":1,
"url":"/#/customized/modelStudents"
},
{
"collected":false,
"createTime":"2019-10-18 01:56:37",
"desc":"班级相册",
"icon":"http://192.168.3.20/group1/M00/00/39/wKgDFF24FWmAC1-cAAAuJ3YEngw503.png",
"id":12,
"modifyTime":"2019-10-30 02:33:14",
"name":"班级相册",
"parentId":7,
"permission":"classAlbum:page",
"sysId":1,
"url":"/#/customized/classAlbum"
},
{
"collected":false,
"createTime":"2019-10-18 01:56:37",
"desc":"课程表",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_JuAYESwAAAgKG6WwTo134.png",
"id":13,
"modifyTime":"2019-10-26 01:26:39",
"name":"课程表",
"parentId":7,
"permission":"schedule:page",
"sysId":1,
"url":"/#/customized/schedule"
},
{
"collected":false,
"createTime":"2019-10-18 01:56:37",
"desc":"值日表",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_KKAZr-tAAAfswZJdEk487.png",
"id":14,
"modifyTime":"2019-10-26 01:26:41",
"name":"值日表",
"parentId":7,
"permission":"onduty:page",
"sysId":1,
"url":"/#/customized/onduty"
},
{
"collected":false,
"createTime":"2019-10-18 01:56:37",
"desc":"上课时间",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_LCAYLOlAAAh6FW1LEI710.png",
"id":15,
"modifyTime":"2019-10-26 01:26:44",
"name":"上课时间",
"parentId":7,
"permission":"courseTime:page",
"sysId":1,
"url":"/#/customized/courseTime"
},
{
"collected":false,
"createTime":"2019-10-18 01:56:38",
"desc":"做业",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_LaALlt6AAAgsUrKhcE570.png",
"id":16,
"modifyTime":"2019-10-26 01:26:46",
"name":"做业",
"parentId":7,
"permission":"homework:page",
"sysId":1,
"url":"/#/customized/homework"
},
{
"collected":false,
"createTime":"2019-10-18 01:56:38",
"desc":"公开课",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_L-AE5A5AAAWBx3iYt4230.png",
"id":17,
"modifyTime":"2019-10-26 01:26:49",
"name":"公开课",
"parentId":7,
"permission":"openClass:page",
"sysId":1,
"url":"/#/customized/openClass"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:20",
"desc":"考勤设置",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24DrWAY1nyAAAcs65FGK0930.png",
"id":18,
"modifyTime":"2019-10-30 02:04:39",
"name":"考勤设置",
"parentId":7,
"permission":"attendanceTime:page",
"sysId":1,
"url":"/#/customized/attendanceTime"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:20",
"desc":"考勤记录",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_MqAZeQ9AAAic2eGjZA744.png",
"id":19,
"modifyTime":"2019-10-26 01:26:52",
"name":"考勤记录",
"parentId":7,
"permission":"attendance:page",
"sysId":1,
"url":"/#/customized/attendance"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:21",
"desc":"通知公告",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_M-ADNAhAAAb9mvlM4M088.png",
"id":20,
"modifyTime":"2019-10-26 01:26:55",
"name":"通知公告",
"parentId":7,
"permission":"notic:page",
"sysId":1,
"url":"/#/customized/notic"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:21",
"desc":"社团活动",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_NmAQ7c7AAAic2eGjZA896.png",
"id":21,
"modifyTime":"2019-10-26 01:26:58",
"name":"社团活动",
"parentId":7,
"permission":"societies:page",
"sysId":1,
"url":"/#/customized/societies"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:22",
"desc":"校园动态",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_aeAZZI3AAAVBmFjT3U586.png",
"id":22,
"modifyTime":"2019-10-26 01:27:01",
"name":"校园动态",
"parentId":7,
"permission":"schoolNews:page",
"sysId":1,
"url":"/#/customized/schoolNews"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:23",
"desc":"考试",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24D1eAb5RLAABLbCUaWPw133.png",
"id":25,
"modifyTime":"2019-10-30 02:07:21",
"name":"考试",
"parentId":7,
"permission":"exam:page",
"sysId":1,
"url":"/#/customized/exam"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:24",
"desc":"食堂",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_ZCAXaCdAAATiS3efmI140.png",
"id":26,
"modifyTime":"2019-10-26 01:27:06",
"name":"食堂",
"parentId":7,
"permission":"canteen:page",
"sysId":1,
"url":"/#/customized/canteen"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:25",
"desc":"充值、激活",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24EW-ALGJLAAA2lelzJ30355.png",
"id":27,
"modifyTime":"2019-10-30 02:17:16",
"name":"充值、激活",
"parentId":7,
"permission":"cards:page",
"sysId":1,
"url":"/#/customized/cards"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:25",
"desc":"IP电话套餐",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24EdmAQdeqAAAqa7yajNo327.png",
"id":28,
"modifyTime":"2019-10-30 02:18:03",
"name":"IP电话套餐",
"parentId":7,
"permission":"ipPackage:page",
"sysId":1,
"url":"/#/customized/ipPackage"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:26",
"desc":"通话记录",
"icon":"http://192.168.3.20/group1/M00/00/39/wKgDFF24EpOAJFY9AAB8cX3kVRo457.png",
"id":29,
"modifyTime":"2019-10-30 02:21:08",
"name":"通话记录",
"parentId":7,
"permission":"callRecords:page",
"sysId":1,
"url":"/#/customized/callRecords"
},
{
"collected":false,
"createTime":"2019-10-18 01:57:42",
"desc":"帐单查询",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24EhGAYfzXAAC5S89Wkbk580.png",
"id":30,
"modifyTime":"2019-10-30 02:18:59",
"name":"帐单查询",
"parentId":7,
"permission":"cardBill:page",
"sysId":1,
"url":"/#/customized/cardBill"
}
],
"collected":false,
"createTime":"2019-10-18 01:52:30",
"desc":"定制化页面",
"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_DCAMXJ8AAAcs65FGK0459.png",
"id":7,
"modifyTime":"2019-10-26 01:25:43",
"name":"定制化页面",
"parentId":0,
"permission":"customized:page",
"sysId":1,
"url":"/#/"
},
],
"collected":false,
"id":0
},
"msg":"操做成功"
}
复制代码
相关文章
- 1. 一个基于vue和element-ui的树形穿梭框组件
- 2. 基于vue,一个简单实用的树形穿梭框
- 3. ElementUI穿梭框
- 4. 一个基于 elementUi的vue树形下拉框组件
- 5. 一个基于 elementUi的树形下拉框组件vue
- 6. 自定义树形穿梭框组件
- 7. vue 使用基于element-ui的el-tree-transfer插件，实现树形穿梭框
- 8. 一个基于 elementUi 的树形下拉框，vue
- 9. 结合el-tree和el-transfer搞一个树形穿梭框
- 10. 树形穿梭框的代码实现
- 更多相关文章...
- • PHP imagecreate - 新建一个基于调色板的图像 - PHP参考手册
- • Spring使用AspectJ开发AOP：基于XML和基于Annotation - Spring教程
- • ☆基于Java Instrument的Agent实现
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
